溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖：
代碼如下：
<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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
