我们在浏览购物网站的商品详情页时,通常都会有一个展示商品图片的放大镜,如下所示:
下面我们就来仿一下这个功能。
首先是结构的搭建:
1 2 3 4 5 6 7 8 9 <div id ="container" > <div id ="left" > <img src ="img.jpg" alt ="" style ="width: 100%;" > <span > </span > </div > <div id ="right" > <img style ="position: absolute;" src ="bigimg.jpg" alt ="" > </div > </div >
然后做亿点样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 * { margin : 0 ; padding : 0 ; box-sizing : border-box; } #left { left : 50px ; top : 50px ; position : relative; width : 400px ; height : 400px ; border : 1px solid black; } #left span { position : absolute; width : 250px ; height : 250px ; left : 0 ; top : 0 ; background-color : rgba (192 , 149 , 83 , .6 ); } #right { position : absolute; left : 460px ; top : 50px ; width : 500px ; height : 500px ; border : 1px solid black; overflow : hidden; }
现在我们的页面是这样:
接下来将 #left span
与 #right
设置为不显示,display: none;
,然后为左边的 div
添加鼠标移入移出事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 let leftDiv = document .getElementById('left' )let rightDiv = document .getElementById('right' )let span = document .querySelector('#left span' )let bigImg = document .querySelector('#right img' )leftDiv.onmouseover = () => { span.style.display = 'block' rightDiv.style.display = 'block' } leftDiv.onmouseout = () => { span.style.display = 'none' rightDiv.style.display = 'none' }
这样,当鼠标悬浮于 leftDiv
时,span
与 rightDiv
便会显现。
下面为leftDiv
添加 onmousemove
事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 leftDiv.onmousemove = (e ) => { let spanLeft = e.clientX - leftDiv.offsetLeft - span.offsetWidth / 2 let spanTop = e.clientY - leftDiv.offsetTop - span.offsetHeight / 2 let maxLeft = leftDiv.offsetWidth - span.offsetWidth let maxTop = leftDiv.offsetHeight - span.offsetHeight spanLeft = spanLeft < 0 ? 0 : (spanLeft > maxLeft ? maxLeft : spanLeft) spanTop = spanTop < 0 ? 0 : (spanTop > maxTop ? maxTop : spanTop) span.style.left = spanLeft + 'px' span.style.top = spanTop + 'px' let imgLeft = spanLeft * (bigImg.width - 500 ) / (400 - 250 ) let imgTop = spanTop * (bigImg.height - 500 ) / (400 - 250 ) bigImg.style.left = -imgLeft + 'px' bigImg.style.top = -imgTop + 'px' }
最后为span
更换一下指针样式,与购物网站更接近:
1 2 3 #left span :hover { cursor : move; }
效果如下:
完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <meta http-equiv ="X-UA-Compatible" content ="IE=edge" > <meta name ="viewport" content ="width=device-width, initial-scale=1.0" > <title > 仿购物网站放大</title > <style > * { margin : 0 ; padding : 0 ; box-sizing : border-box; } #left { left : 50px ; top : 50px ; position : relative; width : 400px ; height : 400px ; border : 1px solid black; } #left span { position : absolute; width : 250px ; height : 250px ; left : 0 ; top : 0 ; background-color : rgba (192 , 149 , 83 , .6 ); display : none; } #left span :hover { cursor : move; } #right { display : none; position : absolute; left : 460px ; top : 50px ; width : 500px ; height : 500px ; border : 1px solid black; overflow : hidden; } </style > </head > <body > <div id ="container" > <div id ="left" > <img src ="img.jpg" alt ="" style ="width: 100%;" > <span > </span > </div > <div id ="right" > <img style ="position: absolute;" src ="bigimg.jpg" alt ="" > </div > </div > <script > let leftDiv = document .getElementById('left' ) let rightDiv = document .getElementById('right' ) let span = document .querySelector('#left span' ) let bigImg = document .querySelector('#right img' ) leftDiv.onmouseover = () => { span.style.display = 'block' rightDiv.style.display = 'block' } leftDiv.onmouseout = () => { span.style.display = 'none' rightDiv.style.display = 'none' } leftDiv.onmousemove = (e ) => { let spanLeft = e.clientX - leftDiv.offsetLeft - span.offsetWidth/2 let spanTop = e.clientY - leftDiv.offsetTop - span.offsetHeight/2 let maxLeft = leftDiv.offsetWidth - span.offsetWidth let maxTop = leftDiv.offsetHeight - span.offsetHeight spanLeft = spanLeft < 0 ? 0 : (spanLeft > maxLeft ? maxLeft : spanLeft) spanTop = spanTop < 0 ? 0 : (spanTop > maxTop ? maxTop : spanTop) span.style.left = spanLeft + 'px' span.style.top = spanTop + 'px' let imgLeft = spanLeft * (bigImg.width - 500 ) / (400 -250 ) let imgTop = spanTop * (bigImg.height - 500 ) / (400 -250 ) bigImg.style.left = -imgLeft + 'px' bigImg.style.top = -imgTop + 'px' } </script > </body > </html >