詳情頁放大鏡效果收錄
Javascript
window.onload = function(){
var oDiv = document.getElementById('div1');
var mark = oDiv.getElementsByTagName('span')[0];
var oDiv2 = document.getElementById('div2');
var img2 = oDiv2.getElementsByTagName('img')[0];
oDiv.onmouseout = function(){
mark.style.display = 'none';
};
oDiv.onmousemove = function(ev){
mark.style.display = 'block';
var ev = ev || window.event;
var L = ev.clientX - oDiv.offsetLeft - mark.offsetWidth/2;
var T = ev.clientY - oDiv.offsetTop - mark.offsetHeight/2;
if(L<0){
L = 0;
}
else if(L>oDiv.offsetWidth - mark.offsetWidth){
L = oDiv.offsetWidth - mark.offsetWidth;
}
if(T<0){
T = 0;
}
else if(T>oDiv.offsetHeight - mark.offsetHeight){
T = oDiv.offsetHeight - mark.offsetHeight;
}
mark.style.left = L + 'px';
mark.style.top = T + 'px';
var scaleX = L/(oDiv.offsetWidth - mark.offsetWidth);
var scaleY = T/(oDiv.offsetHeight - mark.offsetHeight);
img2.style.left = - scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
img2.style.top = - scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';
};
};
HTML
<div id="div1">
<span class="mark"></span>
</div>
<div id="div2">
</div>
CSS
#div1{ width:180px; height:180px; overflow:hidden; position:relative;top:100px;left:50px;}
#div1 .mark{ width:100px; height:100px; background:yellow; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none;}
#div1 img{width:100%;}
#div2{ width:500px; height:500px; position:absolute; left:250px; top:100px; overflow:hidden;}
#div2 img{ position:absolute; left:0; top:0;width:900px;height:900px;}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
