第三十八节 jQuery之滚动条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .div1{
 8             width: 200px;
 9             height: 300px;
10             /*background-color: gold;*/
11             position: relative;
12             overflow: hidden;
13             border: 1px solid #666;
14         }
15         .div2{
16             position: absolute;
17             left: 0;
18             top: 0;
19             width:190px;
20             text-align: center;
21             /*background-color: red*/
22         }
23         .div3{
24             width: 10px;
25             height: 300px;
26             float: right;
27             border: 1px solid #666;
28             /*background-color: gold;*/
29 
30         }
31         .div4{
32             background-color: gold;
33             width: 10px;
34             height: 10px;
35         }
36     </style>
37     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
38     <script type="text/javascript" src="../jquery-ui.min.js"></script>
39     <script type="text/javascript">
40         $(function(){
41             $('.div4').draggable({
42                 // axis:'x',  // 限制在x轴拖动
43                 
44                 containment:'parent',  // 限制在父级拖动
45 
46                 opacity:0.3,
47 
48                 drag:function(event,ui){
49                     // console.log(ui);
50                     document.title = ui.position.top;
51                     $('.div2').css({'top':-ui.position.top*6});
52                     // $('.div3').val(ui.position.left);
53                 }
54             })
55         });
56     </script>
57 </head>
58 <body>
59     <div class="div1">
60         <div class="div3">
61             <div class="div4"></div>
62         </div>
63         <div class="div2">的父类看了的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法的父类看了看京东方阿斯蒂芬拉水电费撒的发生的发送到发斯蒂芬撒打发斯蒂芬按时发大水发松岛枫啊上单噶的返回都是撒旦法</div>
64     </div>
65 </body>
66 </html>

 

posted @ 2020-03-16 20:39  kog_maw  阅读(95)  评论(0编辑  收藏  举报