十六、Javascript实现放大镜效果
生活随笔
收集整理的這篇文章主要介紹了
十六、Javascript实现放大镜效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2020/6/1
作者介紹：Runsen目前大三下學(xué)期，專業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴重，專業(yè)排名中下。.在大學(xué)60%的時間，都在CSDN。
本文實現(xiàn)的Javascript實現(xiàn)放大鏡效果，在這里Runsen帶領(lǐng)大家來使用javaScript實現(xiàn)圖片的放大和縮小。實現(xiàn)的效果圖如下 。
文章目錄
- 布局
- js
- 完整代碼
- Javascript總結(jié)
素材下載：https://download.csdn.net/download/weixin_44510615/12484958
布局
一張相同的圖片大的和小的，img1上有一個#list的div，通過鼠標移動list，根據(jù)list區(qū)域內(nèi)的圖片，來裁剪#small_box的div的圖片，并將圖片放大，顯示出來。
js
完整代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;border:none}img{vertical-align: top;}#box{width: 350px;height: 350px;background-color: red;margin: 100px 0 0 100px;position: relative;}#small_box{width: 100%;height: 100%;border: 1px solid #ccc;position: relative;}#small_box img{width: 350px;height: 350px;}#mask{width: 100px;height: 100px;background-color: rgba(255, 255, 0, .4);position: absolute;left: 0;top:0;cursor: move;display: none;}#big_box{width: 600px;height: 600px;border: 1px solid #ccc;overflow: hidden;position: absolute;left: 360px;top:0;display: none;}#list{margin: 20px 0 0 100px;}#list img{margin: 3px;}</style> </head> <body><div id="box"><div id="small_box"><img src="images/pic001.jpg" alt=""><span id="mask"></span></div><div id="big_box"><img src="images/pic01.jpg" alt="" style="position: absolute; left:0; top:0;"></div></div><div id="list"><img src="images/pic0001.jpg" alt=""><img src="images/pic0002.jpg" alt=""><img src="images/pic0003.jpg" alt=""></div> <script>window.onload = function () {// 1. 獲取需要的標簽var box = document.getElementById("box");var small_box = box.children[0];var big_box = box.children[1];var mask = small_box.children[1];var big_img = big_box.children[0];var list_img = document.getElementById("list").children;// 2. 監(jiān)聽鼠標進入小盒子small_box.onmouseover = function () {// 2.1 把隱藏的內(nèi)容顯示mask.style.display = 'block';big_box.style.display = 'block';// 2.2 監(jiān)聽鼠標的移動small_box.onmousemove = function (event) {var event = event || window.event;// 2.3 求出鼠標的坐標var pointX = event.clientX - small_box.offsetParent.offsetLeft - mask.offsetWidth * 0.5;var pointY = event.clientY - small_box.offsetParent.offsetTop - mask.offsetHeight * 0.5;// 2.4 邊界檢測if(pointX < 0){pointX = 0;}else if(pointX >= small_box.offsetWidth - mask.offsetWidth){pointX = small_box.offsetWidth - mask.offsetWidth;}if(pointY < 0){pointY = 0;}else if(pointY >= small_box.offsetHeight - mask.offsetHeight){pointY = small_box.offsetHeight - mask.offsetHeight;}// 2.5 讓放大鏡移動起來mask.style.left = pointX + 'px';mask.style.top = pointY + 'px';// 2.6 讓大圖移動起來/*smallX / bigX = smallBox.width / 大圖的寬度bigX = smallX / ( smallBox.width / 大圖的寬度 )*/big_img.style.left = - pointX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';big_img.style.top = - pointY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';}};// 3. 監(jiān)聽鼠標離開小盒子small_box.onmouseout = function () {// 2.1 把隱藏的內(nèi)容顯示mask.style.display = 'none';big_box.style.display = 'none';};// 4. 遍歷列表圖片for(var i=0; i<list_img.length; i++){(function (i) {var img = list_img[i];img.onmouseover = function () {small_box.children[0].src = "images/pic00"+ (i + 1) +".jpg";big_img.src = "images/pic0"+ (i + 1) +".jpg"}})(i);}} </script> </body> </html>Javascript總結(jié)
總結(jié)
以上是生活随笔為你收集整理的十六、Javascript实现放大镜效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 社保卡可以给别人用吗
- 下一篇： 二十五、深入Java中的static静态