思路:
鼠标移动事件时,需要计算当前块和放大块的比例。这样就实现看大图了。
下面是代码,仅供参考:
<style>
* { margin:0; padding:0; }
.div1, .div2 { position:relative; overflow:hidden; float:left; width:310px; height:310px; margin:10px; }
.div1 { background:url(images/m1.jpg) no-repeat; }
.div1 span { display:none; position:absolute; top:0; left:0; width:100px; height:100px; background:yellow; opacity:0.5; }
.div2 { display:none; }
.div2 img { position:absolute; top:0; left:0; }
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function (){
var oDiv1=$('.div1');
var oDiv2=$('.div2');
var oSpan=$('.div1 span');
var oImg=$('.div2 img');
oDiv1.hover(function (){
oDiv2.show();
oSpan.show();
}, function (){
oDiv2.hide();
oSpan.hide();
});
var maxLeft=oDiv1.width()-oSpan.width();
var maxTop=oDiv1.height()-oSpan.height();
oDiv1.mousemove(function (ev){
var left=ev.clientX-oSpan.parent().offset().left-oSpan.width()/2;
var top=ev.clientY-oSpan.parent().offset().top-oSpan.height()/2;
if (left < 0)
{
left=0;
}
else if (left > maxLeft)
{
left=maxLeft;
}
if (top < 0)
{
top=0;
}
else if (top > maxTop)
{
top=maxTop;
}
oSpan.css('left', left+'px');
oSpan.css('top', top+'px');
// 算比例
var a=left;
var b=maxLeft;
var b2=oImg.width()-oDiv2.width();
var a2=a/b*b2;
oImg.css('left', -a2+'px');
});
});
</script>
</head>
<body>
<div class="div1">
<span></span>
</div>
<div class="div2">
<img src="images/b1.jpg" alt="" />
</div>
</body>
本回答被网友采纳