<!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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
