昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件,
基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x, y)然后计算
<强> x/小图的宽度*大图得宽度/2
<强> y/小图的高度*大图得高度/2
<强>计算出来的两个结果即为大图得左右偏移距离
/2是为了让右边区域不会出现空白。
经过测试,ie7以上以及主流浏览器都可以用,代码如下:
& lt; div类="包装"比;
& lt; div类=靶 北?
& lt; img src=" https://www.yisu.com/zixun/1s.jpg "比;
& lt; div类="工具" id=肮ぞ摺弊４? lt;/div>
& lt;/div>
& lt; div类="大"祝辞& lt; img src=" https://www.yisu.com/zixun/1.jpg "祝辞& lt;/div>
& lt;/div>
.wrap{溢出:隐藏;保证金:50 px汽车;}
.small{:相对;浮动:左;宽度:214 px;高度:328 px;}
.tool{宽度:100 px;高度:100 px;位置:绝对;:50 px;左:100 px;背景:rgba (255255255, 0.5);}
.big{浮动:左;保证金:40 0 px;宽度:330 px;溢出:隐藏;高度:328 px;显示:没有,位置:相对;}
.big img{位置:绝对;宽度:650 px;高度:960 px;}
之前
主要的JS代码如下:
//不加蒙版放大镜
$ (' .small ') .mousemove(函数(e) {
(美元).siblings (.big),告诉();//var e=事件| | window.event;
var scrollX=document.documentElement。scrollLeft | | document.body.scrollLeft;//滚动条距离屏幕左边的宽度
var scrollY=document.documentElement。scrollTop | | document.body.scrollTop;//滚动条距离屏幕上面的高度//e.pageX相对于文档左边的高度//e.pageY相对于文档上面的高度//e.clientX相对于屏幕左边的高度//e.clientY相对于屏幕上面的高度
var xx=e。pageX | | e。clientX + scrollX;//相对于文档左边的宽度
var yy=e。pageY | | e。clientY + scrollY;//相对于文档上面的高度//.offset直()上元素相对于文档上面的位置//.offset () .left元素相对于文档左面的位置
var y=yy - $ () .offset直()上;//鼠标相对于元素的x, y坐标
var x=xx美元(这).offset () .left;=$ var宽度(这).width ();
var lwidth=$(这).siblings (.big); (img) .width ();//按照大图与小图的比例来进行移动的
var=x/宽度* lwidth/2;
身高=$ var(这).height ();
var lheight=$(这).siblings (.big); (img) .height ();
var顶级=y/高* lheight/2;
(美元).siblings (.big); (img) . css({左:左,上:顶级});//控制台。日志(x +“- - -”+ y);//不加蒙版放大镜结束//蒙版跟着动
var twidth=$(这);(.tool) .width ();
var theight=$(这);(.tool) .height ();
var tleft=x-twidth/2;
var ttop=y-theight/2;
如果(tleft<0) {
tleft=0;
}
如果(tleft> width-twidth) {
tleft=width-twidth;
}
如果(ttop<0) {
ttop=0
}
如果(ttop> height-theight) {
ttop=height-theight;
}
(美元);(.tool) . css({左:tleft,顶级:ttop});
});
之前
效果如下:
,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
