拖動滾動條實現div跟隨效果程式碼例項
線上客服系統大家都比較熟悉,一般會在網頁的側欄顯示,並且,當拖動滾動條的時候,客服系統能夠跟隨滾動,並且一般會帶有緩衝效果,下面就通過程式碼例項,詳細介紹一下如何實現此特效。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #div1 { width:50px; height:200px; background:#0000FF; position:absolute; right:0; bottom:50px; } </style> <script type="text/javascript"> window.onscroll=function() { var oDiv=document.getElementById('div1'); var DivScroll=document.documentElement.scrollTop || document.body.scrollTop; move(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+DivScroll)); }; var timer=null; function move(end) { clearInterval(timer); timer=setInterval(function(){ var oDiv=document.getElementById('div1'); var speed=(end-oDiv.offsetTop)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop == end) { clearInterval(timer); } else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); } </script> </head> <body style="height:1000px;"> <div id="div1"> </div> </body> </html>
以上程式碼實現了我們的要求,當拖動滾動條的時候,div塊能夠跟隨滾動。
相關文章
- js實現的div拖動效果例項程式碼JS
- 移動端div塊拖動效果程式碼例項
- javascript模擬實現滾動條效果程式碼例項JavaScript
- 移動端div跟隨滾動條滾動(自制
- 美化滾動條效果程式碼例項
- 表格拖動滾動條標題固定程式碼例項
- 拖動滾動條載入資料程式碼例項
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- 滑鼠拖動實現將div放入方格例項程式碼
- 可以拖動的div塊程式碼例項
- 拖動滾動條實現內容自動載入效果
- 拖動滾動條實現側欄導航定位效果
- jQuerydiv元素拖動效果程式碼例項jQuery
- 實現隨著滾動條滾動,導航會自動切換的效果
- css隱藏滾動條程式碼例項CSS
- jQuery大圖跟隨效果程式碼例項jQuery
- 跟隨滾動條漂浮的返回頂部按鈕效果
- js獲取滾動條高度例項程式碼JS
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- 原生JS控制多個滾動條同步跟隨滾動JS
- 滑鼠按住拖動具有半透明效果的程式碼例項
- js物件導向封裝拖動效果程式碼例項JS物件封裝
- 可以拖動立方體3D效果程式碼例項3D
- js實現的文字垂直滾動例項程式碼JS
- jQuery列表上下垂直滾動效果程式碼例項jQuery
- 網頁title標題滾動效果程式碼例項網頁
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- html5拖動上傳圖片效果程式碼例項HTML
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- JavaScript跟隨滑鼠指標的粒子效果程式碼例項JavaScript指標
- CSS3滾動條效果程式碼CSSS3
- js實現的元素抖動效果程式碼例項JS
- jquery實現的滑動軸效果程式碼例項jQuery
- 滑鼠懸浮實現抖動效果例項程式碼
- Delphi中TFlowPanel實現滾動條效果
- css實現div全屏水平垂直居中效果程式碼例項CSS