<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0px; list-style: none; } #parent{ width: 600px; height: 12px; position: relative; top: 12px; left: 200px; background: #ff00ff; } #childer{ width: 12px; height: 12px; position: absolute; background: #675389; } #div1{ width: 300px; height: 300px; background: #ff8876; margin:100px auto; opacity: 0; filter:alpha(opacity=0); } #div3{ position: relative; top:10px; left:50px; width: 300px; height: 300px; overflow: hidden; border:1px solid #ff00ff; } #div4{ position: absolute; top:0px; left:0px; word-break: break-all; word-wrap: break-word; } </style> <script> function getpos(ev){ var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop}; } function addEvent(obj,even,fn){ /*事件绑定*/ return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn); } function unEvent(obj,even,fn){ return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn); } window.οnlοad=function(){ var oparent=document.getElementById("parent"); ochildes=document.getElementById("childer"); odiv1=document.getElementById("div1"); odiv3=document.getElementById("div3"); odiv4=document.getElementById("div4"); disX=0; disY=0; addEvent(ochildes,"mousedown",function(ev){ var eventer=ev||event; pos=getpos(eventer); disX=pos.x-ochildes.offsetLeft; disY=pos.y-ochildes.offsetTop; if(ochildes.setCapture){ ochildes.οnmοusemοve=mouseMove; ochildes.οnmοuseup=mouseUp; ochildes.setCapture(); return false; }else{ document.οnmοusemοve=mouseMove; document.οnmοuseup=mouseUp; return false; } }) function mouseMove(ev){ var eventer=ev||event; pos=getpos(eventer); ochildes.style.left=pos.x-disX+"px"; ochildes.style.top=0+"px"; if(ochildes.offsetLeft<0){ ochildes.style.left=0+"px"; } if(ochildes.offsetLeft>oparent.offsetWidth-ochildes.offsetWidth){ ochildes.style.left=oparent.offsetWidth-ochildes.offsetWidth+"px"; } var scale=ochildes.offsetLeft/(oparent.offsetWidth-ochildes.offsetWidth); odiv1.style.opacity=scale; odiv1.style.filter="alpha(opacity:"+scale*100+")"; odiv4.style.top=-(scale*(odiv4.offsetHeight-odiv3.offsetHeight))+"px"; } function mouseUp(){ unEvent(ochildes,"mousedown"); this.οnmοusedοwn=null; this.οnmοusemοve=null; /* if(ochildes.releaseCapture){ ochildes.releaseCapture(); } */ } } </script> </head> <body> <div id="parent"> <div id="childer"></div> </div> <div id="div1"></div> <div id="div3"> <div id="div4">sssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssvvvv </div> </div> </body> </html>
JS 实现自定义滚动条 实现透明度控制和滚动条
最新推荐文章于 2024-06-12 11:03:19 发布