运用了两种思路。显示半透明遮罩层的思路都一致,在放大的图片框中移动采用了不同的方法。
1.第一种实现原理:
①鼠标移入over:遮罩层和大图显示;移出out:遮罩层和大图消失
②鼠标移动move:遮罩层跟随鼠标移动。(可以参考拖拽)
③大图部分:实现大图跟着遮罩层一起移动的效果,使用了scrollLeft(?滚动条偏移,还没有具体学过)
代码部分:
left.onmousemove = function(e){
e = e||event;
var x = e.clientX - wrapper.offsetLeft;
var y = e.clientY - wrapper.offsetTop;
// ..偏移矫正,原始的位置是鼠标在遮罩层的左顶点,要让鼠标移动到中间,
//就让遮罩层上移一半offsetHeight,左移一半offsetWeight。(与鼠标移动的距离相反
x = x-moveDiv.offsetLeft/2;
y = y-moveDiv.offsetTop/2;
// ...判断:不让遮罩层脱离框的范围
if(x<=0){
x=0;
}
//也可以写成 x = x<=0? 0:x;
if(x>=wrapper.offsetWidth-moveDiv.offsetWidth){
x=wrapper.offsetWidth-moveDiv.offsetWidth;
}
if(y<=0){
y=0;
}
//也可以写成 y = y<=0? 0:y;
if(y>=wrapper.offsetHeight-moveDiv.offsetHeight){
y=wrapper.offsetHeight-moveDiv.offsetHeight;
}
moveDiv.style.left = x+'px';
moveDiv.style.top = y+'px';
right.scrollLeft = x*3;
right.scrollTop = y*3;
//这样写是会产生误差的,没有经过计算的倍数和小图大图宽度。
//原理是,当遮罩层下移的时候,大图区域是大图不动,可视框跟着移动,方向一致。
}
2.使用了jq(可以使用js看看)
第二种的大图和遮罩层尺寸经过计算赋值。
假装每个可以让用户看到的框都是一个可视区。
小图和大图之间的放大倍数可设置,因为要通过遮罩层看到完整的大图,相当于遮罩层和小图的比例=大图显示区和大图的比例。
在此案例中,我们设置放大倍数为2,同时都设置为正方形减少难度。
遮罩层宽度/小图 =大图可视区/大图
因为我们在此案例中设置了两边都一样的宽度,即小图=大图可视区,
列式子:遮罩层宽度/a = a/(a*2)
所以,遮罩层宽度 = 1/2 *(a),即小图的小半宽度。
(可以额外考虑长方形的情况,或者小图和大图可视区不一样大的情况)。
代码部分:
$(function(){
// 设置放大倍数
var mul = 2;
// 设置大图宽度
$('.bigView').find('img').css({
'width':500*mul+'px',
'height':500*mul+'px'
});
// 设置遮罩层宽度,根据公式可得,遮罩层宽度为1/2 *小图宽度
$('.moveView').css({
'width':500/2 +'px',
'height':500/2+'px'
});
// 鼠标移入的时候遮罩层和大图都出现
$('.content').mouseover(function(){
//
$('.moveView').show();
$('.bigView').show();
});
//鼠标移动的时候,遮罩层和大图都开始动。遮罩层的移动参考拖拽,大图移动使用了margin,大图区域中的img在js中动态设置了宽高,其他属性都没有设置,margin较简单。(考虑一下绝对定位可以吗)
$('.content').mousemove(function(e){
var e = e||event;
var disx = e.clientX -$('.content').offset().left;
var disy = e.clientY - $('.content').offset().top;
var x = disx -($('.moveView').width())/2;
var y = disy -($('.moveView').height())/2;
var maxX = $('.content').width() -$('.moveView').width();
var maxY = $('.content').height() -$('.moveView').height();
x = x<=0?0:x;
y = y<=0?0:y;
x = x>=maxX?maxX:x;
y = y>=maxY?maxY:y;
$('.moveView').css({
'left': x+'px',
'top':y+'px'
});
// 大图:可视区不动,大图片动,加负号是方向不同
$('.bigView').find('img').css({
'margin-left':- x*mul+'px',
'margin-top':- y*mul +'px'
});
});
// 鼠标移出的时候,一起消失
$('.content').mouseout(function(){
//
$('.moveView').hide();
$('.bigView').hide();
});
});
</script>