Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 485911
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
相关博文
scroll滚动条样式

分类： Web开发

2015-04-30 11:24:27


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JQuery模拟滚动条</title>


  8. <style type="text/css">
  9. *{margin:0;padding:0;list-style-type:none;}
  10. a,img{border:0;}
  11. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
  12. /* bd */
  13. .bd{width:362px;margin:0 auto;margin-top:50px;height:600px;}
  14. .top{border:1px solid #ccc;height:573px;width:250px;overflow:hidden;float:left;padding:0 5px 5px 5px;}
  15. .top ul{width:250px;padding-bottom:5px;}
  16. .top ul li{padding:2px;border:1px solid #ccc;font-size:0px;margin-top:5px;}
  17. .top ul .li{margin-top:5px}
  18. .top ul li img{width:244px;height:180px;}
  19. .scroll{width:13px;margin-left:10px;height:578px;float:left;background:#e6e6e6;position:relative; border-radius: 5px;}
  20. .scroll p{width:11px;height:61px;background:#ffffff;cursor:auto;left:1px;top:1px;position:absolute; border-radius:10px;}
  21. </style>

  23. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  24. <script type="text/javascript">
  25. $(function(){
  26.     var Bool=false;
  27.     var Scro=$("#scroll");
  28.     var Scrp=$("#p");
  29.     var Scrobd=$("#bd");
  30.     var Scroul=$("#ul");
  31.     var Scrp_Height =Scrp.outerHeight()/2;
  32.     var Num2=Scro.outerHeight()-Scrp.outerHeight();
  33.     var offsetX=0;
  34.     var offsetY=0;
  35.     Scrp.mousedown(function(e){
  36.         Bool=true;
  37.     });
  38.     $(document).mouseup(function(){
  39.         Bool=false;
  40.     });
  41.     $(document).mousemove(function(e){
  42.         if(Bool){
  43.             var Num1= e.clientY - Scro.position().top;
  44.             var y=Num1 - Scrp_Height;
  45.             if(y<=1){
  46.                 Scrll(0);
  47.                 Scrp.css("top",1);
  48.             }else if(y>=Num2){
  49.                 Scrp.css("top",Num2);
  50.                 Scrll(Num2);
  51.             }else{
  52.                 Scrll(y);
  53.             }
  54.         }
  55.     });
  56.     function Scrll(y){
  57.         Scrp.css("top",y);
  58.         Scroul.css("margin-top",-(y/(Scro.outerHeight()-Scrp.outerHeight()))*(Scroul.outerHeight()-Scrobd.height()));
  59.     }
  60.     if(document.getElementById("scroll_bd").addEventListener)
  61.     document.getElementById("scroll_bd").addEventListener('DOMMouseScroll',wheel,true);
  62.     document.getElementById("scroll_bd").onmousewheel=wheel;
  63.     var Distance=Num2*0.1;
  64.     function wheel(e){
  65.         var evt = e || window.event;
  66.         var wheelDelta = evt.wheelDelta || evt.detail;
  67.         if(wheelDelta == -120 || wheelDelta == 3){
  68.             var Distances=Scrp.position().top+Distance;
  69.             if(Distances>=Num2){
  70.                 Scrp.css("top",Num2);
  71.                 Scrll(Num2);
  72.             }else{
  73.                 Scrll(Distances);
  74.             }
  75.             return false;
  76.         }else if (wheelDelta == 120 || wheelDelta == -3){
  77.             var Distances=Scrp.position().top-Distance;
  78.             if(Distances<=1){
  79.                 Scrll(0);
  80.                 Scrp.css("top",1);
  81.             }else{
  82.                 Scrll(Distances);
  83.             }
  84.             return false;
  85.         }
  86.     }
  87. });
  88. </script>

  90. </head>
  91. <body>

  93. <div class="bd" id="scroll_bd">
  94.     <div class="top" id="bd">
  95.         <ul id="ul">
  96.             <li><img src="1.png" /></li>
  97.             <li><img src="2.png" /></li>
  98.             <li><img src="1.png" /></li>
  99.             <li><img src="2.png" /></li>
  100.             <li><img src="1.png" /></li>
  101.             <li><img src="2.png" /></li>
  102.             <li><img src="1.png" /></li>
  103.             <li><img src="2.png" /></li>
  104.             <li><img src="1.png" /></li>
  105.             <li><img src="2.png" /></li>
  106.         </ul>
  107.     </div>
  108.     
  109.     <div class="scroll" id="scroll">
  110.         <p id="p"></p>
  111.     </div>
  112. </div>

  114. </body>
  115. </html>

阅读(1470) | 评论(0) | 转发(0) |
0

上一篇：图片转换成64位

下一篇：HTML2CANVAS插件对整个网页或者网页某一部分截图并保存为图片

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6