视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > jQuery教程 >

[JQuery]JQuery自定义滚动条

时间:2015-12-09 10:33酷播
好久没来站里面逛逛了，也没在群里面和大伙聊了。这几天由于项目需要自定义滚动条，于是早上写了一个滚动条Demo、目前属于原型还在做功能，写德不好勿喷。

好久没来站里面逛逛了，也没在群里面和大伙聊了。这几天由于项目需要自定义滚动条，于是早上写了一个滚动条Demo、目前属于原型还在做功能，写德不好勿喷。 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"> 
  5.     <title></title> 
  6.     <script type="text/javascript"> 
  7.       window.onload=function(){ 
  8.           var oDiv1=document.getElementById("div1"); 
  9.           var oDiv2=document.getElementById("div2"); 
  10.           var oDiv3=document.getElementById("div3"); 
  11.           var oDiv4=document.getElementById("div4"); 
  12.  
  13.           oDiv2.onmousedown=function(ev){ 
  14.               var Event=ev||event; 
  15.               var disY=Event.clientY-oDiv2.offsetTop; 
  16.  
  17.               function Move(ev){ 
  18.                   var Event=ev||event; 
  19.                   var oLeft=Event.clientY-disY; 
  20.                   if(oLeft>oDiv1.offsetHeight-oDiv2.offsetHeight){ 
  21.                       oLeft=oDiv1.offsetHeight-oDiv2.offsetHeight 
  22.                   } 
  23.                   else if(oLeft<0){ 
  24.                       oLeft=0; 
  25.                   } 
  26.                   oDiv2.style.top=oLeft+'px'; 
  27.  
  28.                   var Fbai=oLeft / (oDiv1.offsetHeight-oDiv2.offsetHeight); 
  29.                   oDiv4.style.top=-Fbai*(oDiv4.offsetHeight-oDiv3.offsetHeight)+'px'; 
  30.               }; 
  31.  
  32.               function Up(ev){ 
  33.                   var Event=ev||event; 
  34.                   this.onmousemove=null; 
  35.                   this.onmouseup=null; 
  36.                   if(this.releaseCapture){ 
  37.                       this.releaseCapture(); 
  38.                   } 
  39.  
  40.               } 
  41.               if(oDiv2.setCapture){ 
  42.                   oDiv2.onmousemove=Move; 
  43.                   oDiv2.onmouseup=Up; 
  44.                   oDiv2.setCapture(); 
  45.               } 
  46.               else 
  47.               { 
  48.                   document.onmousemove=Move; 
  49.                   document.onmouseup=Up; 
  50.               } 
  51.               return false; 
  52.           } 
  53.       } 
  54.     </script> 
  55.     <style type="text/css"> 
  56.         body{ margin: 0; padding: 0;} 
  57.         #Box{ width: 167px; height: 302px; overflow: hidden; margin: 40px auto;} 
  58.         #div1{ width: 15px; height: 300px; border-radius:7px;position: relative; float: right; background: #ccc; opacity: 0.6; top:50%; margin-top: -150px;} 
  59.         #div2{ width: 15px; height: 15px; border-radius: 10px; background: red;position: absolute; cursor: pointer; z-index: 99; float: right;} 
  60.         #div3{width: 150px; height: 300px; border:#000000 solid 1px; border-radius:4px;position: relative; overflow:hidden; float: left;} 
  61.         #div4{width: 150px; height: auto;position: absolute;} 
  62.     </style> 
  63. </head> 
  64. <body> 
  65. <div id="Box"> 
  66.    <div id="div3"> 
  67.     <div id="div4"> 
  68.         JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。 
  69.         Netscape公司在最初将其脚本语言命名为LiveScript。在Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”[2]，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[3]。JavaScript与Java名称上的近似，是当时网景为了营销[1]考虑与Sun公司达成协议的结果。为了取得技术优势，微软推出了JScript脚本语言。Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。现两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非是作为给程序人员的编程语言来推广和宣传，但是JavaScript具有非常丰富的特性。 
  70.     </div> 
  71. </div> 
  72.    <div id="div1"> 
  73.           <div id="div2"></div> 
  74. </div> 
  75. </div> 
  76. </body> 
  77. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器