event 事件 自定义滚动条 控制文字大小 透明度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #parent{ width: 600px; height: 20px; background: red; position: relative; margin: 10px auto; } #div1{ position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: green; } #div2{ width: 0; height: 0; background: blue; } #div3{ width: 400px; height: 400px; opacity: 0; filter: alpha(opacity=0); background: gray; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oParent = document.getElementById("parent"); var oDiv2 = document.getElementById("div2"); var oDiv3 = document.getElementById("div3"); var disx = 0; document.onmousedown = function(ev){ var oEvent = ev || event; disx = oEvent.clientX - oDiv.offsetLeft; document.onmousemove = function(ev){ var oEvent = ev || event; var l = oEvent.clientX - disx; if(l<0) { l=0; }else if(l> oParent.offsetWidth - oDiv.offsetWidth) { l = oParent.offsetWidth - oDiv.offsetWidth; } oDiv.style.left = l +"px"; //存比例 var scale = l /(oParent.offsetWidth - oDiv.offsetWidth); // document.title = l /580; //改大小 oDiv2.style.width = 400 * scale +"px"; oDiv2.style.height = 400 * scale + "px"; //改透明度 oDiv3.style.filter = 'alpha(opacity:'+scale+')'; oDiv3.style.opacity = scale; } } document.onmouseup = function(){ document.onmousemove = null; } } </script> </head> <body> <div id="parent"> <div id="div1"></div> </div> <div id="div2"></div> <div id="div3"></div> </body> </html>