onmousewheel&DOMMouseScroll自定义滚动条

简单的自定义滚动条效果
js源码 适合有一定基础的菜鸟 因为我也是个菜鸟 哈哈 不多说 直接奉上代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>鼠标滚轮滑动的——滚动条</title>
  6     <style>
  7         *{padding: 0; margin: 0;}
  8         #case{ width: 332px;  margin:30px auto;}
  9         #parnte{ width: 30px; height: 402px;  background-color: #333333; position: relative; float: right;}
 10         #div2{width: 30px; height: 30px; background: #00ffff; position: absolute;}
 11         #box{ background-color:#cccccc;  width:300px; height:400px; border: 1px #000000 solid; overflow: hidden; position: relative; float: left;}
 12         #txt{position: absolute; left: 0; top: 0; padding: 10px 5px;}
 13     </style>
 14     <script>
 15         window.onload=function()
 16         {
 17 //          获取domElement;
 18             var oParnt = document.getElementById('parnte');
 19             var oDiv2 = document.getElementById('div2');
 20             var oBox = document.getElementById('box');
 21             var oTxt = document.getElementById('txt');
 22 
 23 //          初始化 y
 24             var disY =0;
 25 
 26 //          绑定事件 兼容主流浏览器
 27             fnAddEvent(oDiv2 ,'mousewheel' , fnMouseWheel);
 28             fnAddEvent(oDiv2 ,'DOMMouseScroll' , fnMouseWheel);
 29 
 30             fnAddEvent(oParnt ,'mousewheel' , fnMouseWheel);
 31             fnAddEvent(oParnt ,'DOMMouseScroll' , fnMouseWheel);
 32 
 33             fnAddEvent(oBox ,'mousewheel' , fnMouseWheel);
 34             fnAddEvent(oBox ,'DOMMouseScroll' , fnMouseWheel);
 35 
 36 
 37             function fnMouseWheel(ev)
 38             {
 39                 var oEvent = ev||event;
 40                 var bDown = true;
 41 //              判断滚轮 方向
 42                 bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
 43                 if(bDown)//IE
 44                 {
 45                     fnScope(oDiv2.offsetTop+10);
 46 
 47                 }
 48                 else//FF
 49                 {
 50                     fnScope(oDiv2.offsetTop-10);
 51                 }
 52 //                FF 下解决 自带滚动条 滚动事件
 53                 if(oEvent.preventDefault)
 54                 {
 55                     oEvent.preventDefault();
 56                 }
 57 
 58 //               IE 下解决 自带滚动条 滚动事件
 59                  return false;
 60             }
 61 
 62             oDiv2.onmousedown=function(ev)
 63             {
 64                 var oEvent =ev || event;
 65                 disY=oEvent.clientY-oDiv2.offsetTop;
 66 
 67                 if(oDiv2.setCapture)//IE
 68                 {
 69 
 70                     oDiv2.onmousemove=fnMove;
 71                     oDiv2.onmouseup=fnUp;
 72                     oDiv2.setCapture();//获取捕获pc端所有事件 解决IE下 bug
 73                 }
 74                 else//FF
 75                 {
 76                     alert('a');
 77                     document.onmousemove=fnMove;
 78                     document.onmouseup=fnUp;
 79                 }
 80                 return false;
 81             };
 82 
 83 
 84 
 85             function fnMove(ev)
 86             {
 87 
 88                 var oEvent =ev || event;
 89                 var t=oEvent.clientY-disY;
 90 
 91                 fnScope(t);
 92 
 93 
 94             }
 95 
 96             function fnUp()
 97             {
 98                 this.onmousemove=null;
 99                 this.onmouseup=null;
100 
101                 if(oDiv2.releaseCapture)
102                 {
103                     oDiv2.releaseCapture();
104                 }
105 
106             }
107 
108 //            将限制 返回和 控制文本 滑动的 函数封装 以便 拖拽 和 滚轮 事件的 时候 计算
109             function fnScope(t)
110             {
111                 if(t<0)
112                 {
113                     t=0;
114                 }
115                 else if(t>oParnt.offsetHeight-oDiv2.offsetHeight)
116                 {
117                     t=oParnt.offsetHeight-oDiv2.offsetHeight;
118                 }
119                 oDiv2.style.top=t+'px';
120 //                获得百分比
121                 var scale= t/(oParnt.offsetHeight-oDiv2.offsetHeight);
122 
123                 oTxt.style.top=-(oTxt.offsetHeight-oBox.offsetHeight)*scale+'px';
124             }
125 
126         };
127 
128         //绑定事件
129 
130         function fnAddEvent(obj ,sEvent , fn)
131         {
132             var fnEvent=fn;
133             if(obj.attachEvent)
134             {
135                 fnEvent=function(arguments)
136                 {
137                   fn.call(obj, arguments)
138                 };
139                 obj.attachEvent('on'+sEvent ,fnEvent );
140             }
141             else
142             {
143                 obj.addEventListener(sEvent ,fnEvent);
144             }
145 
146             return fnEvent;
147         }
148     </script>
149 </head>
150 <body style="height: 800px;">
151 <div id="case">
152     <div id="parnte">
153         <div id="div2"></div>
154     </div>
155 
156     <div id="box">
157         <div id="txt">
158             新华网天津12月27日电  27日上午，长江水抵达南水北调中线天津市内配套工程的第一站——曹庄泵站，流向天津滨海新区的津滨水厂，并从这里进入天津的千家万户。
159 
160             记者站在泵站水闸处看到，尽管天津室外温度很低，但经过千里跋涉的长江水水面并无结冰，平缓流动。
161 
162             天津市自来水集团总工程师何文杰说，为保障各水厂切换平稳过渡、安全运行，引江水进入天津后，将在各家水厂分阶段、分步骤实施水源切换，其中，位于滨海新区的津滨水厂目前已经率先切换，该水厂覆盖的天津市东丽区、津南区及滨海新区部分区域的市民从当前开始最先喝上长江水。至2015年春节前后，天津中心城区广大市民都将喝上长江水。
163 
164             “南水北调中线工程建成通水后，天津将有引滦入津和南水北调两条水源，水资源短缺的局面得到缓解。”天津市南水北调办公室主任朱芳清说，“新的供水格局，为经济社会可持续发展、生态文明建设和群众生活水平的提高，提供更可靠的水资源保障。”
165 
166             天津是资源型严重缺水地区，水资源短缺、单一、脆弱问题突出，始终是经济社会发展的制约性因素。天津也是南水北调中线工程的主要受水区之一。
167 
168             记者了解到，2006年6月，天津市在中线工程沿线各省市中率先启动了南水北调配套工程建设，截至目前，直接承接引江水的天津中心城区供水工程、尔王庄水库至津滨水厂供水工程、滨海新区供水工程、西河原水枢纽泵站、西河原水枢纽泵站至宜兴埠站原水管线联通工程等5个骨干输配水工程已全部建成，累计完成投资79亿元，并如期迎来了清澈的长江水。
169 
170             朱芳清介绍，引江之水来之不易，天津市将加强水资源管理，落实最严格的新华网天津12月27日电  27日上午，长江水抵达南水北调中线天津市内配套工程的第一站——曹庄泵站，流向天津滨海新区的津滨水厂，并从这里进入天津的千家万户。
171 
172             记者站在泵站水闸处看到，尽管天津室外温度很低，但经过千里跋涉的长江水水面并无结冰，平缓流动。
173 
174             天津市自来水集团总工程师何文杰说，为保障各水厂切换平稳过渡、安全运行，引江水进入天津后，将在各家水厂分阶段、分步骤实施水源切换，其中，位于滨海新区的津滨水厂目前已经率先切换，该水厂覆盖的天津市东丽区、津南区及滨海新区部分区域的市民从当前开始最先喝上长江水。至2015年春节前后，天津中心城区广大市民都将喝上长江水。
175 
176             “南水北调中线工程建成通水后，天津将有引滦入津和南水北调两条水源，水资源短缺的局面得到缓解。”天津市南水北调办公室主任朱芳清说，“新的供水格局，为经济社会可持续发展、生态文明建设和群众生活水平的提高，提供更可靠的水资源保障。”
177 
178             天津是资源型严重缺水地区，水资源短缺、单一、脆弱问题突出，始终是经济社会发展的制约性因素。天津也是南水北调中线工程的主要受水区之一。
179 
180             记者了解到，2006年6月，天津市在中线工程沿线各省市中率先启动了南水北调配套工程建设，截至目前，直接承接引江水的天津中心城区供水工程、尔王庄水库至津滨水厂供水工程、滨海新区供水工程、西河原水枢纽泵站、西河原水枢纽泵站至宜兴埠站原水管线联通工程等5个骨干输配水工程已全部建成，累计完成投资79亿元，并如期迎来了清澈的长江水。
181 
182             朱芳清介绍，引江之水来之不易，天津市将加强水资源管理，落实最严格的水资源管理制度，合理配置水资源，同时强化水生态保护，高效、节约用水，把水用好、用活、用足，让宝贵的引江水促进发展、提升环境、改善民生。水资源管理制度，合理配置水资源，同时强化水生态保护，高效、节约用水，把水用好、用活、用足，让宝贵的引江水促进发展、提升环境、改善民生。
183         </div>
184     </div>
185 </div>
186 
187 </body>
188 </html>

 

posted on 2014-12-29 17:39  VANQUISHER  阅读(627)  评论(0)  编辑  收藏  举报

导航