借鉴鼠标滑轮BUG解决方案 

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4   <title> New Document </title>
  5   <meta charset="utf-8">
  6         <style>
  7                 #wp {width: 300px; height: 20px; background: #ccc; margin: 50px auto; position: relative;}
  8                 #box {width: 20px; height: 20px; background: red; position: absolute;}
  9                 #main {width: 300px; height: 200px; border: 1px solid #333; margin: 50px auto; position: relative; overflow: hidden;}
 10                 #content {width: 300px; position: absolute;}
 11         </style>
 12         <script>
 13                 window.onload=function(){
 14                         var oParent=document.getElementById('wp');
 15                         var oBox=document.getElementById('box');
 16                         var oWp=document.getElementById('main');
 17                         var oDiv=document.getElementById('content');
 18                         var bDown=true;
 19 
 20                         oBox.onmousedown=function(ev){
 21                                 var oEv=ev||event;
 22                                 var disX=oEv.clientX-oBox.offsetLeft;
 23                                 
 24                                 document.onmousemove=function(ev){
 25                                         var oEv=ev||event;
 26                                         var l=oEv.clientX-disX;
 27 
 28                                         setLeft(l)
 29                                 }
 30 
 31                                 document.onmouseup=function(){
 32                                         document.onmousemove=null;
 33                                         document.onmouseup=null;
 34                                 }
 35 
 36                                 return false;
 37                         }
 38 
 39                         function mouseWheel(ev){
 40                                 var oEv=ev||event;
 41                                 bDown=oEv.wheelDelta?oEv.wheelDelta<0:oEv.detail>0;
 42 
 43                                 if(bDown){
 44                                         setLeft(oBox.offsetLeft+10);
 45                                 }else{
 46                                         setLeft(oBox.offsetLeft-10);
 47                                 }
 48                                 
 49                                 if(oEv.preventDefault){
 50                                         oEv.preventDefault();
 51                                 }
 52                                 return false;
 53                         }
 54 
 55                         function setLeft(l){
 56                                 if(l<0){
 57                                         l=0;
 58                                 }else if(l>oParent.offsetWidth-oBox.offsetWidth){
 59                                         l=oParent.offsetWidth-oBox.offsetWidth;
 60                                 }
 61 
 62                                 oBox.style.left=l+'px';
 63                                 var bl=l/(oParent.offsetWidth-oBox.offsetWidth);
 64                                 oDiv.style.top=-(oDiv.offsetHeight-oWp.offsetHeight)*bl+'px';
 65                         }
 66 
 67                         myAddEvent(oParent,'mousewheel',mouseWheel);
 68                         myAddEvent(oParent,'DOMMouseScroll',mouseWheel);
 69                         myAddEvent(oWp,'mousewheel',mouseWheel);
 70                         myAddEvent(oWp,'DOMMouseScroll',mouseWheel);
 71 
 72 
 73                 }
 74 
 75                 function myAddEvent(obj,sEv,fn){
 76                         if(obj.attachEvent){
 77                                 obj.attachEvent('on'+sEv,fn);
 78                         }else{
 79                                 obj.addEventListener(sEv,fn,false);
 80                         }
 81                 }
 82         </script>
 83 </head>
 84 
 85 <body style="height: 2000px">
 86   <div id="wp">
 87                 <div id="box"></div>
 88         </div>
 89   <div id="main">
 90                 <div id="content">
 91             关于妙味
 92 妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌，
 93 妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！
 94 目前主要针对的是javascript培训，同时还提供了css教程、javascript视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服务，同时还为处于javascript入门阶段的朋友录制了大量javascript视频，其中涉及了大量javascript基础知识，希望妙味课堂推出的javascript网络培训课程能带给大家更多惊喜。
 95 妙味讲师：
 96 妙味课堂的讲师来自中国最具吸引力的IT企业，如淘宝、ShopEx等。
 97 前端开发讲师：刘伟（Leo）
 98 WEB 前端开发工程师(5年)、CSS 精品课程讲师(3年)，妙味课堂创始人；
 99 曾任北京科尔威视、ShopEx 北京营销中心 ECMall 项目前端架构师；
100 精通 XHTML+CSS 架构，深刻理解 W3C 标准，熟练掌握系统的浏览器兼容性解决方案，
101 擅长大型网站前端架构及调试各类页面错位等诸多兼容性问题的疑难杂症；
102 专注于网站用户体验性研究，并在视频、电子商城、教育平台、企业级应用站点拥有数量庞大的案例和多年实战经验；
103                 </div>
104         </div>
105 </body>
106 </html>

 

posted @ 2012-07-06 09:49  胡淼  阅读(189)  评论(0)    收藏  举报