javascript代码案例整理解读.doc

--------------------------------------------------- 放大镜 --------------------------------------------------- html head meta charset=UTF-8 title放大镜/title style *{ margin:0px; padding:0px; } #left{ width:400px; height:400px; border:1px solid red; background-image:url(images/small.jpg); float:left; position:relative; } #one{ width:100px; height:100px; background-color:#ccc; filter:alpha:(opacity=70); opacity:0.7; cursor:move; position:absolute; display:none; } #two{ width:400px; height:400px; opacity:0.7; cursor:move; position:absolute; z-index:1; } #right{ width:400px; height:400px; border:1px solid green; float:left; overflow:hidden; position:relative; display:none; } #big{ position:absolute; } /style /head body div id=left div id=two/div div id=one/div /div div id=right img src=images/big.jpg id=big/ /div /body script type=text/javascript // 获取input框的值 left=document.getElementById(left); right=document.getElementById(right); one=document.getElementById(one); big=document.getElementById(big); // 移动事件 two.onmousemove=function(e){ //浏览器兼容性 ee = e||window.event; //获取坐标 x=ee.clientX-one.offsetWidth/2; y=ee.clientY-one.offsetHeight/2; one.style.display=block; right.style.display=block; //把鼠标的实时坐标位置赋给小滑块的实际移动位置 one.style.left=x+px; one.style.top=y+px; //鼠标移动的坐标范围 //左范围 if(parseInt(one.style.left)0){ one.style.left=0+px; } //上范围 if(parseInt(one.style.top)0){ one.style.top=0+px; } //右范围 if(parseInt(one.style.left)left.offsetWidth-one.offsetWidth){ one.style.left=left.offsetWidth-one.offsetWidth+px; } //下范围 if(parseInt(one.style.top)left.offsetHeight-one.offsetHeight){ one.style.top=left.offsetHeight-one.offsetHeight+px; } big.style.top=-2*parseInt(one.style.top)+px; big.style.left=-2*parseInt(one.style.left)+px; } two.onmouseout=function(){ one.style.display=none; right.style.di