这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript 滚轮控制模拟滚动条的相关资料, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
此实例通过对滚轮事件的监听,通过滚轮控制滚动条的上下移动,可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- #boxwrap{
- position: relative;
- width: 15px;
- height: 500px;
- margin: 50px auto;
- box-sizing: border-box;
- border: 1px solid gainsboro;
- border-radius: 6px;
- }
- #box{
- position: absolute;
- left: 0px;
- top: 0px;
- width: 13px;
- height: 30px;
- background: gray;
- border-radius: 6px;
- }
- </style>
- <script type="text/javascript">
- window.onload = function (){
- var boxwrp = document.getElementById('boxwrap');
- var box = document.getElementById('box');
- //兼容firefox
- if(boxwrp.addEventListener){
- document.addEventListener("DOMMouseScroll", fn, false);
- }
- document.onmousewheel = fn;//兼容IE、chrome
- function fn(ev){
- var ev = ev||event;
- var bool = false;
- //IE、chrome 向上:120,向下:-120
- if(ev.wheelDelta){
- bool= ev.wheelDelta > 0? true : false;
- }
- //firefox 向上:-3,向下:3
- else{
- bool= ev.detail < 0? true : false;
- }
- if(bool){
- if(box.offsetTop>=10){
- box.style.top = box.offsetTop - 10 + "px";
- }
- else{
- box.style.top = 0;
- }
- }
- else{
- if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){
- box.style.top = box.offsetTop + 10 + "px";
- }
- else{
- box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px";
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="boxwrap">
- <div id="box"></div>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0522/331054.html