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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript动画系列之模拟滚动条

    前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的应用.本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似.仅仅通过范围限定,使元素只可以在单一方向上拖拽 <div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0

  • javascript模拟滚动条实现代码

    javascript模拟滚动条实现代码

    其实这样代码产生些了冗余.......不如单独写个Slider类 做为第一个版本还是保存起来 有时间的话 试着单独的写个Slider类 #container { height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; } #container #content{ height:200px;width:370px;float:left;overflow:hidden; } #container #content div{ m

  • js模拟滚动条(横向竖向)

    js模拟滚动条(横向竖向)

    JS: 复制代码 代码如下: (function(win){     var doc = win.document,db = doc.body;     var mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';     var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};     skyScroll

  • 原生js实现模拟滚动条

    原生js实现模拟滚动条

    当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

  • javascript滚轮控制模拟滚动条

    此实例通过对滚轮事件的监听,通过滚轮控制滚动条的上下移动,可以将其修改后运用与使用滚轮缩放图片.改变透明度等特效. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #boxwrap{ posi

  • JavaScript实现鼠标滚轮控制页面图片切换功能示例

    本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • div模拟滚动条效果示例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

  • 图片与JavaScript配合做出个性滚动条

    图片与JavaScript配合做出个性滚动条 * { margin:0; padding:0; } body { margin:20px 0 400px 20px; font:12px Arial; } h1 { font-size:14px; } ol { margin:20px; line-height:160%; } #out { position:relative; width:500px; height:300px; margin:100px 0 100px 80px; border:

  • JS滚轮控制图片缩放大小和拖动的实例代码

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .dragAble { position: relative; cursor: move; } .img-con { position: relative; width: 71

  • JavaScript实现控制打开文件另存为对话框的方法

    本文实例讲述了JavaScript实现控制打开文件另存为对话框的方法.分享给大家供大家参考.具体如下: 这里通过JS打开图片另存为对话框,提示用户保存文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator&

随机推荐