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 id="pdiv" style="800px;height:50px;background:#fff;margin:100px auto;position:relative;text-align:center;line-height:50px;"> <strong id="strong1">0%</strong> <div id="div1" style="overflow:hidden;50px;height:50px;background:red;cursor:move;position:absolute;left:0;top:0;opacity:0.5;filter:alpha(opacity:50);"></div> </div> </body> </html>
上代码：
<!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 id="pdiv" style="50px;height:800px;background:#fff;margin:20px auto;position:relative;text-align:center;line-height:800px;"> <strong id="strong1">0%</strong> <div id="div1" style="overflow:hidden;50px;height:50px;background:red;cursor:move;position:absolute;left:0;top:0;opacity:0.5;filter:alpha(opacity:50);"></div> </div> </body> </html>
<!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,p{padding:0;margin:0;} .clear{clear:both;height:0;overflow:hidden;} .content{960px;margin:20px auto;border:1px #fff solid;padding:5px;} .box{height:600px;800px;overflow:hidden;float:left;position:relative;} .main{position:absolute;left:0;top:0px;} .scrollbar{float:right;20px;height:600px;background:#C9C9C9;position:relative;text-align:center;line-height:800px;} </style> </head> <body style="background:#EAEAEA;"> <div class="content"> <div class="box"> <div class="main" id="main"> <p>一篇很有见地的文章</p> <p>我很受伤，今天我终于拿到了签证，过完年我就带着老婆孩子移民离开这个国家了，有几句话，还是想说出来。我大学毕业就干了房地产，在一家业内TOP10的公司，一步步从售楼先生干到今天的地区副总，十年后，终于感觉到累了，也看透了，以前是不能说，今天终于可以说了。</p> <p>你们以为一定要财大气粗才能做开发商?你们错了，开发商大部分一开始都是空手套白狼，关系比资金重要的多，地才是一切的根本，只要跟政府关系够硬，拿到了地，那银行都巴巴的跑来，乖乖的给你贷款。</p> <p>你以为开发商都是自掏腰包?你们又错了，土地转让金都是贷款的，修楼盖房都是承建商垫资的，开发商没掏几个钱!</p> <p>你觉得盖好房子，开发商该卖房了吧，这次还是错了，开发商在开盘之前，会搞个内部认购，至少一半以上的房子都给内部认购掉，这个很多人知道了，其实就是找人向银行贷款买房，这哦其实就是自己卖给自己，但也是变相把楼盘以市价卖给银行，说白了就是产权变换一下，这银行的钱就全进到开发商的腰包了，真正想买房的老百姓，第一次几乎没有能买到心仪的房子，基本都是“卖掉了”，然后过两天告诉你说有人退房，其实这都是把内部认购的房子转移到老百姓手里，钞票再一次进入开发商的腰包。</p> <p>你觉得开发商拿到钱了，就该去还银行贷款了吧，这次还是错了，开发商怎么会那么傻，进了口袋的钱还掏出来?开发商会用这些款子再去拿地，只要拿到土地，随便哪个银行都乖乖的撅着屁股上门来。</p> <p>如果你们问银行就这么傻?我要告诉你，银行就是这么傻，开发商向银行贷款拿地，是用土地做抵押的，现在房子都盖好卖掉了，开发商就算还不了拿地的贷款，银行对这笔烂帐也没办法，只能去找政府，政府就把这块地再次出让，拆迁，补银行烂帐。所以你们没见吗，但凡成熟的开发商，都是拥有好几个相对独立的经济实体，钱就这么转来转去。心情好就还贷款给银行，心情不好就再说了。</p> <p>你们如果觉得政府是真心希望控制房价的，你们怎么老是错呢，真心觉得房价过高的，只是中央政府而已。但是中央政府手里没一寸土地，土地全是地方政府的。你们知道地方政府征地多少钱一亩吗?几万块而已，可卖给开发商多少钱吗?几百万一亩哦!对于地方政府来说，土地就是GDP，土地就是政绩，土地就是繁荣昌盛。你说地方政府会听中央的吗?</p> <p>中央的话地方可以不听，那中央也不是吃软饭的，于是新政策出台了，土地转让从以前的出让制度变成今天的竞拍制度。而且中央一挥手，央企老大哥们出马了，老大哥们挥舞着钞票出现在一个个土地竞拍会现场，大家惊呼，中央要控制土地了。</p> <p>你们觉得央企出马了，房价有望回落了。怎么每次都错呢!现在要拿地不光靠关系了，只能是竞拍，这样很多小开发商是不行了，但是土地就基本都集中到几个大开发商手里，变相土地兼并啊。央企老大哥是不差钱，但民企拿不到地，还不能抬抬价?竞拍的时候多举举牌子，那价格就是几千万几千万的往上窜。央企再牛，我让你拿地的价格跟市场房价靠拢，我让你控制房价，你控制啊!地价就这么高，你老大哥不拿，我民企拿，前面说过了，甭管什么价格，只要土地在手，不怕钞票没有!</p> <p>老大哥们拿了地，那怎么办，只能盖房子卖掉，卖什么价?不可能低于低价吧。再说老大哥的钱哪儿来的，国家给的。国家的钱哪儿来的，从老百姓手里收的。是的，事实就是这么残酷，国家从老百姓手里收钱买昂贵的土地盖成房子再以更贵的价格卖给老百姓。</p> <p>这就是房地产界的循环，政府，土地，银行，一次次的循环，生生不息，于是房价也就滚雪球一般。</p> <p>其实，真正想抑制房价，办法很简单，只要全民坚持两年不买房，不要多，只要两年，那样会倒掉一批开发商跟枪毙一批银行行长双规一批市长，代价是大了点，但是换来的是啥大家心里清楚。</p> <p>我干了10年房地产，真的看透了，天天跟肥头大耳的政府官员吃饭喝酒，跟肠肥脑满的行长唱歌跳舞，真的累了 时间就从2011年1月1日开始至2012年12月31日结束</p> <p>全民号召两年不买房</p> <p>既然政府都不能控制房价</p> <p>就让我们自己团结起来抵制高房价吧</p> </div> </div> <div id="pdiv" class="scrollbar"> <strong id="strong1">0%</strong> <div id="div1" style="overflow:hidden;20px;height:20px;background:red;cursor:pointer;position:absolute;left:0;top:0;opacity:0.5;filter:alpha(opacity:50);"></div> </div> <div class="clear"></div> </div> <script type="text/javascript"> window.onload=function() { var oDiv=document.getElementById("div1"); var oPDiv=document.getElementById("pdiv"); var oTxt=document.getElementById("strong1"); var oDivp=document.getElementById("main"); 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"; oDivp.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> </body> </html>
只要把上面的几个例子 学会 ，滚动条 拖拽 就都学会了。下一篇 写将一些关于html5.0 canvas一些内容。