效果圖：
代碼如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題</title> <style> *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; position: relative; margin-left: 50px; margin-top: 50px; } .imgContent>img{ width: 420px; height: 300px; } </style></head><body> <div class="imgcontent" id="imgContent1"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488436622116&di=e3c2b2a5c847d6051d8daaec9a9a2131&imgtype=0&src=http%3A%2F%2F2a.zol-img.com.cn%2Fproduct%2F174_1200x900%2F888%2FceeY9tJ1QRFLk.jpg" alt="iphone7"> </div></body><script> /*大致功能的思路：(完全按照自己的想法去實現的功能，肯定有很多地方優化，希望大家一起討論) 1、有一個放原始圖片的盒子 2、當鼠標移入這個盒子，在右側創建一個相同大小的鏡像盒子，鏡像盒子里創建一個放大4倍的鏡像圖片，同時也在原始盒子里創建一個放大鏡（若存在就display:block，若不存在就創建，鏡像盒子同理） 3、當鼠標移動時，原始盒子里的放大鏡跟隨鼠標移動（類似拖拽功能），鏡像盒子里的圖片的top和left值是原始盒子里放大鏡的top和left值的-4倍 4、當鼠標移出原始盒子時,隱藏鏡像盒子和放大鏡*/ function Scaler(id){ var me = this var originalDiv = document.querySelector("#"+id) var mirrorDiv = null var mirrorImg = null var scaler = null var real_left = originalDiv.offsetLeft var real_right = originalDiv.offsetWidth+originalDiv.offsetLeft var real_top = originalDiv.offsetTop var real_bottom = originalDiv.offsetHeight+originalDiv.offsetTop //創建鏡像盒子 this.createMirror = function(){ var originalStyle = getComputedStyle(originalDiv) mirrorDiv = document.createElement("div") mirrorDiv.style.cssText = 'width:'+originalStyle.width+ ';height:'+originalStyle.height+ ';position:absolute;left:'+originalStyle.width+ ';top:0px;margin-left:10px;overflow:hidden;'; //創建鏡像圖片 mirrorImg = document.createElement("img") mirrorImg.style.cssText = 'width:'+(originalDiv.offsetWidth*4)+ 'px;height:'+originalDiv.offsetHeight*4+'px;position:absolute;top:0px;left:0px;' mirrorImg.src = document.querySelector("#"+id+" img").src mirrorDiv.appendChild(mirrorImg) originalDiv.appendChild(mirrorDiv) } //創建放大鏡 this.createScaler = function(left,top){ scaler = document.createElement("div") scaler.style.cssText = 'width:100px;height:100px;background-color:yellow;opacity:0.4;position:absolute;' scaler.style.top = top; scaler.style.left = left; originalDiv.appendChild(scaler) } //設置鏡像圖片位置 this.setImgPosition = function(left,top){ mirrorImg.style.left = '-'+left+'px' mirrorImg.style.top = '-'+top+'px' } //鼠標移入事件 this.e_mouseover = function(){ originalDiv.style.cursor = "move" if (!mirrorDiv) { me.createMirror() }else{ mirrorDiv.style.display = "block" }; if (!scaler) { me.createScaler(0,0) }else{ scaler.style.display = "block" }; } //鼠標移出事件 this.e_mouseleave = function(){ mirrorDiv.style.display = "none" scaler.style.display = "none" } //鼠標移動事件(關鍵代碼) this.e_mousemove = function(e){ // 判斷鼠標是否移出原始盒子 if (e.clientX > real_right || e.clientX < real_left || e.clientY > real_bottom || e.clientY < real_top ) { me.e_mouseleave() return false }; // 鼠標到原始盒子頂部的距離 var padTop = e.clientY-real_top // 鼠標到原始盒子左側的距離 var padLeft = e.clientX-real_left //放大鏡跟隨鼠標移動(-50是因為讓鼠標在放大鏡的中心) scaler.style.top = padTop-50; scaler.style.left = padLeft-50; //因為鏡像圖片放大了4倍，所以跟隨移動的時候是4倍 me.setImgPosition((padLeft-50)*4,(padTop-50)*4) } //注冊事件監聽 originalDiv.onmouseover = me.e_mouseover originalDiv.onmouseleave = me.e_mouseleave originalDiv.onmousemove = function(e){ me.e_mousemove(e) } } // 創建圖片放大功能對象,參數為原始盒子id即可(放大鏡大小，鏡像圖片放大倍數都可設為參數傳遞) new Scaler("imgContent1")</script></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
