原生JS实现的放大镜效果实例代码

时间：2021-05-25

这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。

<!DOCTYPE HTML><html><head><title>js放大镜效果</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><style>*{margin:0px;padding:0px;border:none;list-style:none;}#box{margin:80px auto;width: 352px;}#box p{width: 350px;height: 350px;border: 1px solid #ddd;margin-bottom: 5px; }#box p img{width:350px;height:350px;}#box h1{width: 352px;height: 54px;overflow:hidden; position:relative;}#box h1 div{width:310px;height: 54px;margin:0px auto;position:relative;}#box h1 div ul{position:absolute;left: 0px;top: 0px;}#box h1 ul li{width: 62px; float: left;}#box h1 ul li img{width: 50px;height: 50px;padding: 1px;border: 1px solid #CECFCE;}#box h1 img.hoveredThumb{border: 2px solid #e4393c;padding: 0;}p#medImgBox{position: relative;}#jing{position: absolute;left: 0;top: 0;width: 175px;height: 175px;border-radius:50%;background: #ffd;opacity: 0.7;display: none;}#medImgBox #mian{display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;cursor: move;opacity: 0;}/**大图显示区域**/#largeImgBox{position:absolute;width: 175px;height: 175px;border-radius:50%;border: 1px solid #faa;top: 0px;left: 352px; overflow: hidden;display: none;}#largeImg{display: none;position: absolute;}</style> </head><body ><div id="box"><p id="medImgBox"><img id="mediumImg" src="images/product-s1-m.jpg" /><span id="jing"></span><span id="mian"></span><span id="largeImgBox"><img id="largeImg"/></span></p><h1><div><ul id="list"><li><img src="images\product-s1.jpg" /></li><li><img src="images\product-s2.jpg" /></li><li><img src="images\product-s3.jpg" /></li><li><img src="images\product-s4.jpg" /></li><li><img src="images\product-s1.jpg" /></li></ul></div></h1></div><script>var imgList = document.querySelectorAll('#box ul li img');for(var i=0; i<imgList.length; i++){var img = imgList[i];img.onmouseover = changeThumbImg;}function changeThumbImg(){var previousHovered = document.querySelector('.hoveredThumb');if(previousHovered==null){this.className = 'hoveredThumb'; changeMediumImg(this.src); //修改中等图片的src}else if(previousHovered!=this){previousHovered.removeAttribute('class');this.className = 'hoveredThumb';changeMediumImg(this.src); //修改中等图片的src}}function changeMediumImg(thumbSrc){var dotIndex = thumbSrc.lastIndexOf('.');var prefix = thumbSrc.substring(0, dotIndex);var suffix = thumbSrc.substring(dotIndex);var mediumSrc = prefix + '-m'+suffix;document.getElementById('mediumImg').src = mediumSrc;}/**为放大镜jing添加鼠标移动事件**/document.querySelector('#mian').onmousemove = function(event){var x = event.offsetX; //事件相对于事件源的偏移量var y = event.offsetY; var jing = document.getElementById('jing'); var w = jing.offsetWidth; //jing的宽和高var h = jing.offsetHeight;var left = x<w/2 ? 0 : (x-w/2);var top = y<h/2 ? 0 : (y-h/2);if(x>(w*2-w/2)){left = w*2 - w;}if(y>(h*2-h/2)){top = h*2 - h;}jing.style.left = left+'px';jing.style.top = top+'px';//修改大图的位置/var largeImg = document.getElementById('largeImg');largeImg.style.left = (-left*largeImg.width/350) + 'px';largeImg.style.top = (-top*largeImg.height/350)+'px';}document.querySelector('#mian').onmouseover = function(){//显示jingvar jing = document.getElementById('jing');jing.style.display = 'block';var largeImgBox = document.getElementById('largeImgBox');largeImgBox.style.display = 'block';//获取当前要显示的大图的srcvar src = document.querySelector('#mediumImg').src;var dotIndex = src.lastIndexOf('.');var prefix = src.substring(0, dotIndex-2);var suffix = src.substring(dotIndex);src = prefix + '-l'+ suffix;var largeImg = document.getElementById('largeImg');largeImg.src = src;largeImg.style.display='block';}document.querySelector('#mian').onmouseout = function(){//除去jingvar jing = document.getElementById('jing');jing.style.display = 'none';//除去大图显示区document.getElementById('largeImgBox').style.display = 'none';}</script></body></html>

以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章