溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{height:2000px;}
div{width: 350px;height: 350px;border: 1px solid red;margin: 10px;float: left;overflow: hidden;}
#s{position: relative;}
#m{width: 100px;height: 100px;background: yellow;opacity: 0.4;filter: alpha(opacity:40);position: absolute;left: 0;top: 0;display: none;}
#b{display: none;position: relative;}
#b img{position: absolute;}
</style>
<script>
window. function () {
var oS=document.getElementById('s');
var oM=document.getElementById('m');
var oB=document.getElementById('b');
var oImg = oB.children[0];
oS. function () {
oM.style.display='block';
oB.style.display='block';
};
oS. function () {
oM.style.display='none';
oB.style.display='none';
};
oS. function (ev) {
/*var oEv=ev||event;
var l=oEv.pageX-oS.offsetLeft-oM.offsetWidth/2;
var t=oEv.pageY-oS.offsetTop-oM.offsetHeight/2;*/
/*兼容性問題 IE中：event對象有x,y屬性 沒有pageX,pageY Firefox中：event對象有PageX,PageY;
* 處理方法：var x=(event.x?event.x:event.pageX);*/
var oE=ev||event;
var oEvx=(oE.x?oE.x:oE.pageX);
var oEvy=(oE.y?oE.y:oE.pageY);
var l=oEvx-oS.offsetLeft-oM.offsetWidth/2;
var t=oEvy-oS.offsetTop-oM.offsetHeight/2;
if(l<0){
l=0;
}
if(l>oS.offsetWidth-oM.offsetWidth){
l=oS.offsetWidth-oM.offsetWidth;
}
if(t<0){
t=0;
}
if(t>oS.offsetHeight-oM.offsetHeight){
t=oS.offsetHeight-oM.offsetHeight;
}
oM.style.left=l+'px';
oM.style.top=t+'px';
oImg.style.left=-l/(oS.offsetWidth-oM.offsetWidth)*(oImg.offsetWidth-oB.offsetWidth)+'px';
oImg.style.top=-t/(oS.offsetHeight-oM.offsetHeight)*(oImg.offsetHeight-oB.offsetHeight)+'px';
}
};
</script>
</head>
<body>
<div id="s">
<img src="img/img_small.jpg">
<span id="m"></span>
</div>
<div id="b" class="b">
<img src="img/img_big.jpg">
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
