放大镜边界怎么设置
<!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>
QCW_2回答
-
OlderSkee
大盒子 offsetLeft< 小盒子的left < 大盒子 offsetLeft+大盒子宽 - 小盒子宽大盒子 offsetTop< 小盒子的Top < 大盒子 offsetTop+大盒子高 - 小盒子高如果在这个范围外，归零。
随时随地看视频慕课网APP
相关分类
JQuery