zoukankan      html  css  js  c++  java
  • 第三十八节 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>
  • 相关阅读:
    ASP.NET程序中常用的三十三种代码【转】
    BTree,BTree,B+Tree,B*Tree都是什么
    调用Google地图
    JS特效总结
    2005 加入博客园
    .net Windows服务程序安装与安装程序的制作
    七夕,爱似流年
    JS+CSS仿魔兽游戏进入进度条特效
    常用正则表达式
    Google翻译网站添加Google翻译,让老外也看的懂你的网站
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12506382.html
Copyright © 2011-2022 走看看