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>
  • 相关阅读:
    114. Flatten Binary Tree to Linked List 把二叉树变成链表
    426. Convert Binary Search Tree to Sorted Doubly Linked List把bst变成双向链表
    微服务之如何建模微服务
    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3t37r4hauhq8c
    剑指offer之面试题2:实现Singleton模式
    微服务之演化式架构师(二)
    ASP.NET Core 框架本质学习
    java之maven之maven的使用
    java之maven之初识maven
    java之mybatis整合spring
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12506382.html
Copyright © 2011-2022 走看看