當前位置：首頁 > 编程语言 > java >内容正文

java

十六、Javascript实现放大镜效果

發布時間：2024/10/8 java 37 豆豆

生活随笔收集整理的這篇文章主要介紹了十六、Javascript实现放大镜效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen
@Date：2020/6/1

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。

本文實現的Javascript實現放大鏡效果，在這里Runsen帶領大家來使用javaScript實現圖片的放大和縮小。實現的效果圖如下。

文章目錄

布局
js
完整代碼
Javascript總結

素材下載：https://download.csdn.net/download/weixin_44510615/12484958

布局

一張相同的圖片大的和小的，img1上有一個#list的div，通過鼠標移動list，根據list區域內的圖片，來裁剪#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. 監聽鼠標進入小盒子small_box.onmouseover = function () {// 2.1 把隱藏的內容顯示mask.style.display = 'block';big_box.style.display = 'block';// 2.2 監聽鼠標的移動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. 監聽鼠標離開小盒子small_box.onmouseout = function () {// 2.1 把隱藏的內容顯示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總結

總結

以上是生活随笔為你收集整理的十六、Javascript实现放大镜效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。