jquery--jqueryUI/实例-draggable滚动条

jqueryUI

jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

常用jqueryUI插件：

Draggable
1、设置数值的滑动条
2、自定义滚动条

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jqueryui-draggable</title>
 9 
10     <style type="text/css">
11 
12         .con{
13             width:300px;
14             height:300px;
15             border:1px solid #000;
16             margin:50px auto 0;
17         }
18 
19         .box{
20             width:40px;
21             height:40px;
22             background-color:gold;
23             cursor:pointer;
24         }
25 
26 
27     </style>
28 
29     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
30     <script type="text/javascript" src="../js/jquery-ui.min.js"></script>       <!--需引入该库-->
31     <script type="text/javascript">
32         $(function(){
33             $('.box').draggable({
34                 // 约束元素在父级内拖动
35                 containment:'parent',
36 
37                 //限制在x轴向拖动
38                 axis:'x',
39 
40                 //拖动是透明度变为0.6
41                 opacity:0.6,
42 
43                 drag:function(ev,ui){
44                     console.log(ui);
45                     console.log(ui.position.left)  //滑动横坐标
46                 }
47             })
48         })
49     </script>
50 
51 </head>
52 <body>
53 
54     <div class="con">
55         <div class="box"></div>
56     </div>
57 
58 </body>
59 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>drag滚动条</title>
 6     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 7     <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 8     <script type="text/javascript">
 9         $(function(){
10             $('.dragbar').draggable({
11                 containment:'parent',  // 约束元素在父级内拖动
12                 axis:'x',  //限制在x轴向拖动
13                 opacity:0.6,  //拖动是透明度变为0.6
14 
15                 drag:function(ev,ui){
16                     //console.log(ui.position.left)
17                     var nowleft=ui.position.left;     //滑动横坐标
18                     $('.progress').css({width:nowleft});    //滑动改变progress宽度
19                     $('.slide_count').val(parseInt(nowleft*100/570));   //滑动改变slide_count框内数字
20                 }
21             })
22         })
23     </script>
24     <style type="text/css">
25         .slidebar_con{
26             width:650px;
27             height:32px;
28             margin:50px auto 0;
29         }
30 
31         .slidebar{
32             width:600px;
33             height:30px;
34             border:1px solid #ccc;
35             float:left;
36             position:relative;
37         }
38 
39         .slidebar .dragbar{
40             width:30px;
41             height:30px;
42             background-color:gold;
43             cursor:pointer;
44             position:absolute;
45             left:0;
46             top:0;
47         }
48 
49         .slidebar .progress{
50             width:0px;
51             height:30px;
52             background-color:#f0f0f0;
53             position:absolute;
54             left:0;
55             top:0;
56         }
57 
58         .slide_count{
59             padding:0;
60             float:right;
61             width:40px;
62             height:30px;
63             border:1px solid #ccc;
64             text-align:center;
65             font-size:16px;
66         }
67 
68     </style>
69 </head>
70 <body>
71     <div class="slidebar_con">
72         <div class="slidebar">
73             <div class="progress"></div>
74             <div class="dragbar"></div>
75         </div>
76         <input type="text" name="" value="0" class="slide_count">
77     </div>
78 </body>
79 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义滚动条</title>
 6     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
 7     <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 8     <script type="text/javascript">
 9         $(function(){
10             var h=$('.paragraph').outerHeight();  //获取paragraph段落高度；
11             var hide=h-500;      //页面隐藏的段落高度
12 
13             $('.scroll_bar').draggable({
14                 containment:'parent',
15                 axis:'y',
16                 opacity:0.6,
17 
18                 drag:function(ev,ui){
19                     var nowtop=ui.position.top;
20                     var nowscroll=parseInt(nowtop/290*hide);
21                     $('.paragraph').css({top:-nowscroll})
22                 }
23             })
24         })
25 
26     </script>
27     <style type="text/css">
28         .scroll_con{
29             width:400px;
30             height:500px;
31             border:1px solid #ccc;
32             margin:50px auto 0;
33             position:relative;
34             overflow:hidden;
35         }
36 
37         .paragraph{
38             width:360px;
39             position:absolute;
40             left:0;
41             top:0;
42             padding:10px 20px;
43             font-size:14px;
44             font-family:'Microsoft Yahei';
45             line-height:32px;
46             text-indent:2em;
47         }
48 
49         .scroll_bar_con{
50             width:10px;
51             height:490px;
52             position:absolute;
53             right:5px;
54             top:5px;
55         }
56 
57         .scroll_bar{
58             width:10px;
59             height:200px;
60             background-color:#ccc;
61             position:absolute;
62             left:0;
63             top:0;
64             cursor:pointer;
65             border-radius:5px;
66 
67         }
68 
69     </style>
70 </head>
71 <body>
72     <div class="scroll_con">
73         <div class="paragraph">
74             2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
75             掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
76 学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
77 学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
78 了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
79 了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
80         </div>
81 
82         <div class="scroll_bar_con">
83             <div class="scroll_bar">
84         </div>
85 
86     </div>
87     </div>
88 </body>
89 </html>

posted on 2019-12-31 00:16 cherry_ning 阅读(478) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning

jquery--jqueryUI/实例-draggable滚动条

jqueryUI

导航

公告