<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}#fdj{width: 350px;height: 350px;border: 1px solid red;position: relative;margin: 100px;}#fdj>.small{width: 350px;height: 350px;}/*小图的宽度是350，阴影区显示的宽度是175*/#fdj>.small>.shadow{width: 155px;height: 155px;background: yellow;opacity: 0.2;position: absolute;top: 0;left: 0;display: none;}/*大图的宽度是800,大图的div的宽带是400*/#fdj>.big{width: 400px;height: 400px;border: 1px solid blue;position: absolute;left: 350px;top: 0;overflow: hidden;display: none;}</style></head><body><div id="fdj"><div><img src="small.jpg" alt=""><div></div></div><div><img src="big.jpg" alt=""></div></div><script src="jquery-1.8.3.min.js"></script><script>$(function(){/*鼠标的移入和移出事件鼠标的移动事件鼠标在div#fdj的相对位置鼠标和阴影区的位置关系*/$('#fdj').mouseover(function(){$('#fdj>.small>.shadow,#fdj>.big').show();// 鼠标的移动事件$(this).mousemove(function(ent){// jquery已经对鼠标对象做了兼容处理// 1.获取鼠标在div#fdj的相对位置// jquery中使用pageX获取鼠标在浏览器的相对位置var x = ent.pageX - $(this).offset().left;var y = ent.pageY - $(this).offset().top;// 2.获取比例关系var scale = $('#fdj>.big>img').width()/$('#fdj>.small>img').width();// 获取bid的宽度和高度var big_w = $('#fdj>.big').width();var big_h = $('#fdj>.big').height();// 3.让大图进行移动$('#fdj>.big').scrollTop(y*scale-big_w/2);$('#fdj>.big').scrollLeft(x*scale-big_h/2);// 4.阴影区/*阴影区一直跟着鼠标移动*/// 获取阴影区的宽度和高度var shadow_w = $('#fdj>.small>.shadow').width();var shadow_h = $('#fdj>.small>.shadow').height();// 判断阴影区的界限var pos = {left:x-shadow_w/2, top:y-shadow_h/2};$('#fdj>.small>.shadow').css(pos);})}).mouseout(function(){$('#fdj>.small>.shadow,#fdj>.big').hide();})})</script></body></html>
2 回答
OlderSkee
TA贡献123条经验 获得超103个赞
大盒子 offsetLeft< 小盒子的left < 大盒子 offsetLeft+大盒子宽 - 小盒子宽
大盒子 offsetTop< 小盒子的Top < 大盒子 offsetTop+大盒子高 - 小盒子高
如果在这个范围外，
归零。
- 2 回答
- 0 关注
- 1077 浏览
添加回答
举报
0/150
提交
取消