jquery jqueryUI_拖拽

  • 1、设置拖拽滑动
  • 1、目录结构
  • 2、自定义滚动条


jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_css

1、设置拖拽滑动

1、目录结构

导入相应的 jquery-1.12.4.min.js 文件，目录结构如下：

jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_javascript_02


jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_javascript_03


代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // 使用字典的方式添加参数
            $('.box').draggable({
                axis:'x'        // 限制在x轴向
                ,opacity:0.6    // 设置拖动时的透明度
                ,containment:'parent'   // 限制其在父级范围拖动；参数：parent，表明在其父元素范围内活动
                ,drag:function (ev,ui) {

                    // 获取拖动时相对于父元素的相对距离
                    var now_left = ui.position.left;
                    console.log(now_left)
                    $('.progress').css({width:now_left});
                    $('#info').val(parseInt(now_left/700*100))

                }
            });
        })
    </script>
    <style type="text/css">
        .big_con{
            width: 1200px;
            height: 100px;
            margin: 30px auto 0;
            position: relative;
            border: 1px solid green;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .parent{
            width: 800px;
            height: 100px;
            border: 1px solid green;
            background-color: pink;
            float: left;
            position: relative;

        }
        .progress{
            height: 100px;
            width: 0;
            background-color: cyan;
            float: left;
            position: absolute;
            left: 0;
            top: 0;
        }
        #info{
            width: 50px;
            height: 50px;
            float: right;
            position: absolute;
            top: 25px;
            right:200px;
        }
    </style>
</head>
<body>
        <div class="big_con">

            <div class="parent">
                <div class="progress"></div>
                <div class="box"></div>
            </div>
            <input type="text" name="" id="info">
        </div>
</body>
</html>

显示效果如下所示：

jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_css_04

2、自定义滚动条

jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_css_05


代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滑动滚动条</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // outerheight():其高度范围是所匹配元素的高度height padding border；
            var outerHeight = $('.paragraph').outerHeight();

            // 整体文本的高度减去外面容器的高度
            var hide = outerHeight - $('.scroll_con').height();

            $('.scroll_bar').draggable({
                axis: 'y'
                , containment: 'parent'
                , opacity: 0.6
                , drag: function (env, ui) {
                    console.log(ui)
                    var nowTop = ui.position.top;
                    var nowscroll = parseInt(nowTop / ($('.scroll_con').height() - $('.scroll_bar').height()) * hide);
                    $('.paragraph').css({top: -nowscroll});
                }
            })
        })
    </script>

    <style type="text/css">
        .scroll_con {
            width: 400px;
            height: 500px;
            border: 1px solid black;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }

        .paragraph {
            width: 360px;
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px 20px;
            font-size: 14px;
            font-family: 'Microsoft Yahei';
            line-height: 32px;
            text-indent: 2em
        }

        .scroll_bar_con {
            width: 10px;
            height: 490px;
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: red;
        }

        .scroll_bar {
            width: 10px;
            height: 200px;
            background-color: #b3b3b3;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="scroll_con">
    <div class="paragraph">
        2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，
        各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver
        就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，
        而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发
        是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
        掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为
        广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。 学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
        学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
        了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
        了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
    </div>

    <div class="scroll_bar_con">
        <div class="scroll_bar"></div>
    </div>

</div>
</body>
</html>

显示效果如下所示：

jQuery项目怎么使用panzoom实现拖拽和缩放 jquery 拖拽布局_jquery_06