JS图片放大效果简单实现代码
本文实例为大家分享了JS实现图片放大效果,供大家参考,具体内容如下
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> <styletype="text/css"> #div1{ width:300px; height:300px; position:relative; margin:30pxauto0px; } #div1img{ width:300px; } #div1span{ width:150px; height:150px; background:red; position:absolute; left:0px; top:0px; display:none; opacity:0.2; } .show{ width:100%; height:100%; background:red; position:absolute; left:0px;top:0px; z-index:10px; opacity:0.1; } #div2{ width:300px; height:300px; position:relative; top:-300px; left:300px; display:none; overflow:hidden; margin:0pxauto0px; } #img1{ position:absolute; } </style> </head> <body> <divid="div1"> <!--图片--> <imgsrc="images/xiangqing.png"alt=""> <!--鼠标选中框--> <span></span> <!--背景--> <divclass="show"></div> </div> <divid="div2"> <!--放大后的图片--> <imgid="img1"src="images/xiangqingda.png"/> </div> </body> <script> //加载完成后显示 window.onload=function(){ varoDiv=document.getElementById('div1'); varoShow=document.getElementsByClassName('show')[0]; varoSpan=document.getElementsByTagName('span')[0]; varoImg=document.getElementById('img1'); //parentNode获得父节点 oShow.onmouseover=function(){ oSpan.style.display='block'; oImg.parentNode.style.display='block'; }; oShow.onmouseout=function(){ oSpan.style.display=''; oImg.parentNode.style.display=''; }; //放大器移动 oShow.onmousemove=function(ev){ //解决浏览器兼容问题 varoEvent=ev||event; //获得鼠标的位置 varx=oEvent.offsetX-oSpan.offsetWidth/2; vary=oEvent.offsetY-oSpan.offsetHeight/2; //console.log(oEvent.clientY); //console.log(oDiv.offsetTop); //console.log(oSpan.offsetHeight/2); //console.log(oEvent.clientY); if(x<0){ x=0; }elseif(x>oShow.offsetWidth-oSpan.offsetWidth){ x=oShow.offsetWidth-oSpan.offsetWidth; }if(y<0){ y=0; }elseif(y>oShow.offsetHeight-oSpan.offsetHeight){ y=oShow.offsetHeight-oSpan.offsetHeight; } //给选中框定位 oSpan.style.left=x+'px'; oSpan.style.top=y+'px'; //给放大器定位 varpercentX=x/(oShow.offsetWidth-oSpan.offsetWidth); varpercentY=y/(oShow.offsetHeight-oSpan.offsetHeight); varoImgparent=oImg.parentNode; oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; }; }; </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。