js滚动条

2012-11-29 13:28

zg1989bd

js滚动条

在页面中，滚动条效果是及其常见的效果，如何用JS自制滚动条效果呢，例如在苹果商城。

js滚动条当我们用鼠标滑动时内容区域会随着改变。

在例如：当版块内容文字很多时，人们往往会跳过阅读，这是我们完全伪装，给用户一种错觉，这版块内容很少，请你慢慢滑动观看，就像大话江湖里面小沈阳说的那样：“我喜欢看图片的，一看字我就头晕"。其实就是因为某版块内容太多，首先就给用户一种阅读压力，信息量太大，我们就是用一个简单的滚动条效果，让用户自己来选择观看，将内容区域高度设置小一些，给用户一种错觉，就一点，很快就看完了。

废话太多，先上一个图吧。

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/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义滚动条</title> <style type="text/css"> body,div,strong{padding:0;margin:0;} </style> <script type="text/javascript"> window.onload=function() {
var oDiv=document.getElementById("div1"); var oPDiv=document.getElementById("pdiv"); var oTxt=document.getElementById("strong1"); var startX=startoDivLeft=0; oDiv.onmousedown=function (e) { var e=e||window.event; startX=e.clientX; startoDivLeft=oDiv.offsetLeft; if (oDiv.setCapture) { oDiv.onmousemove=doDarg; oDiv.onmouseup=stopDarg; oDiv.setCapture(); } else { document.addEventListener("mousemove",doDarg,true); document.addEventListener("mouseup",stopDarg,true); } function doDarg(e) { var e=e||window.event; var l=e.clientX-startX+startoDivLeft; if (l<0) /* 防止超出滚动区域 */ { l=0; } else if (l>oPDiv.offsetWidth-oDiv.offsetWidth) { l=oPDiv.offsetWidth-oDiv.offsetWidth; } oTxt.innerHTML=Math.ceil(l/(oPDiv.offsetWidth-oDiv.offsetWidth)*100)+"%"; oDiv.style.left=l+"px"; } function stopDarg() { if (oDiv.releaseCapture) { oDiv.onmousemove=doDarg; oDiv.onmouseup=stopDarg; oDiv.releaseCapture(); } else { document.removeEventListener("mousemove",doDarg,true); document.removeEventListener("mouseup",stopDarg,true); } oDiv.onmousemove=null; oDiv.onmouseup=null; } } } </script> </head> <body style="background:#000;"> <div ></div> </div> </body> </html>

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/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义滚动条2</title> <style type="text/css"> body,div,strong{padding:0;margin:0;} </style> <script type="text/javascript"> window.onload=function() {
var oDiv=document.getElementById("div1"); var oPDiv=document.getElementById("pdiv"); var oTxt=document.getElementById("strong1"); var startY=startoDivTop=0; oDiv.onmousedown=function (e) { var e=e||window.event; startY=e.clientY; startoDivTop=oDiv.offsetTop; if (oDiv.setCapture) { oDiv.onmousemove=doDarg; oDiv.onmouseup=stopDarg; oDiv.setCapture(); } else { document.addEventListener("mousemove",doDarg,true); document.addEventListener("mouseup",stopDarg,true); } function doDarg(e) { var e=e||window.event; var t=e.clientY-startY+startoDivTop; if (t<0) { t=0; } else if (t>oPDiv.offsetHeight-oDiv.offsetHeight) { t=oPDiv.offsetHeight-oDiv.offsetHeight; } oTxt.innerHTML=Math.ceil(t/(oPDiv.offsetHeight-oDiv.offsetHeight)*100)+"%"; oDiv.style.top=t+"px"; } function stopDarg() { if (oDiv.releaseCapture) { oDiv.onmousemove=doDarg; oDiv.onmouseup=stopDarg; oDiv.releaseCapture(); } else { document.removeEventListener("mousemove",doDarg,true); document.removeEventListener("mouseup",stopDarg,true); } oDiv.onmousemove=null; oDiv.onmouseup=null; } } } </script> </head> <body style="background:#000;"> <div ></div> </div> </body> </html>

js滚动条

只要把上面的几个例子学会，滚动条拖拽就都学会了。下一篇写将一些关于html5.0 canvas一些内容。