這是我用原生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實現的放大鏡效果實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
