當(dāng)前位置：首頁 > 编程语言 > java >内容正文

java

十六、Javascript实现放大镜效果

發(fā)布時間：2024/10/8 java 33 豆豆

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

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

作者介紹：Runsen目前大三下學(xué)期，專業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴(yán)重，專業(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，通過鼠標(biāo)移動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. 獲取需要的標(biāo)簽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)聽鼠標(biāo)進入小盒子small_box.onmouseover = function () {// 2.1 把隱藏的內(nèi)容顯示mask.style.display = 'block';big_box.style.display = 'block';// 2.2 監(jiān)聽鼠標(biāo)的移動small_box.onmousemove = function (event) {var event = event || window.event;// 2.3 求出鼠標(biāo)的坐標(biāo)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)聽鼠標(biāo)離開小盒子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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。