|
window.onload=function(){ var oBtn=document.getElementById("barbtn"); var oBar=document.getElementById("bar"); var oBox=document.getElementById("box"); var oCon=document.getElementById("con"); var y=0; oBtn.onmousedown=function(ev){ var ev=ev||event; var disY=ev.clientY-oBtn.offsetTop; document.onmousemove=function(){ var ev=ev||event; y=ev.clientY-disY; toRun(); } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } return false; } function toRun(){ if(y<0)y=0; if(y>oBar.offsetHeight-oBtn.offsetHeight)y=oBar.offsetHeight-oBtn.offsetHeight; var scale=oBtn.offsetTop/(oBar.offsetHeight-oBtn.offsetHeight); var maxH=oCon.offsetHeight-oBox.offsetHeight; oBtn.style.top=y+"px"; oCon.style.marginTop=-scale*maxH+"px"; } //滚轮事件 toWheel(oBox,function(down){ if(down){ y+=10; }else{ y-=10; } toRun(); }) } function toWheel(obj,fn){ var bDown=false; if(window.navigator.userAgent.indexOf('Firefox')!=-1){ obj.addEventListener('DOMMouseScroll',fnWheel,false); }else{ obj.onmousewheel=fnWheel; } function fnWheel(ev){ var ev=ev||event; if(ev.detail){ if(ev.detail>0){ bDown=true; }else{ bDown=false; } }else{ if(ev.wheelDelta>0){ //向上 bDown=false; }else{ //向下 bDown=true; } } fn&&fn(bDown); } } <div class="box" id="box"> <div class="con" id="con">DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。 “DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。 </div> <div class="bar" id="bar"> <span class="barbtn" id="barbtn"></span> </div> </div> |