首页 > 编程 > JavaScript > 正文

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

2019-11-20 08:44:49
字体:
来源:转载
供稿:网友

这是我用原生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;}/*悬于图片/jing上方的专用于接收鼠标移动事件的一个完全透明的层*/#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实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表