JS图片放大效果简单实现代码
2016-09-08 16:08
956 查看
本文实例为大家分享了JS实现图片放大效果 ,供大家参考,具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30px auto 0px; } #div1 img{ width: 300px; } #div1 span { 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:0px auto 0px; } #img1 { position:absolute; } </style> </head> <body> <div id="div1"> <!-- 图片 --> <img src="images/xiangqing.png" alt=""> <!-- 鼠标选中框 --> <span></span> <!-- 背景 --> <div class="show"></div> </div> <div id="div2"> <!-- 放大后的图片 --> <img id="img1" src="images/xiangqingda.png" /> </div> </body> <script> // 加载完成后显示 window.onload=function () { var oDiv=document.getElementById('div1'); var oShow=document.getElementsByClassName('show')[0]; var oSpan=document.getElementsByTagName('span')[0]; var oImg=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) { // 解决浏览器兼容问题 var oEvent=ev||event; // 获得鼠标的位置 var x=oEvent.offsetX-oSpan.offsetWidth/2; var y=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; } else if(x>oShow.offsetWidth-oSpan.offsetWidth) { x=oShow.offsetWidth-oSpan.offsetWidth; } if(y<0) { y=0; } else if(y>oShow.offsetHeight-oSpan.offsetHeight) { y=oShow.offsetHeight-oSpan.offsetHeight; } // 给选中框定位 oSpan.style.left=x+'px'; oSpan.style.top=y+'px'; // 给放大器定位 var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); var oImgparent=oImg.parentNode; oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; }; }; </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- JS图片放大查看效果! (代码全部重构,兼容IE,FF,OP,简单,健壮)
- js实现简单的单击图片放大功能---仿新浪微博图片放大效果
- 最简单的js图片切换效果实现代码
- 最简单的js图片切换效果实现代码
- js实现图片点击弹出放大效果(无插件)
- html+css+js简单实现图片轮播效果
- JS与CSS3实现图片响应鼠标移动放大效果示例
- 纯js实现背景图片切换效果代码
- js最简单的拖拽效果实现代码
- 简单的实现点击箭头图片切换的js代码
- JS实现图片横向滚动效果示例代码
- 鼠标滑上去后图片放大浮出效果的js代码
- JS实现图片翻书效果示例代码
- js实现图片放大展示效果
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- Asp.net图片上传实现预览效果的简单代码
- JS简单实现多级Select联动菜单效果代码
- js实现图片轮换效果代码