昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件,
基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算
x/小图的宽度*大图得宽度/2
y/小图的高度*大图得高度/2
计算出来的两个结果即为大图得左右偏移距离
/2是为了让右边区域不会出现空白。
经过测试,ie7以上以及主流浏览器都可以用,代码如下:
div class=' wrap ' div class=' small ' img src=' http :1s。jpg ' div class=' tool ' id=' tool '/div/div class=' big ' img src=' http :1。jpg '/div/div。wrap { overflow 3360隐藏;余量:50px汽车;}.小{ position : relative float : left宽度宽度:214px高度:328 px} .工具{宽度:100像素高度:100 px位置:绝对;top:50pxleft:100px背景:rgba(255,255,255,0.5);} .大{ float : leftmargin :0 40px宽度宽度:330像素飞越:隐藏;高度:328 pxdisplay:none位置:相对;}.大img { position:absolute宽度宽度:650像素高度:960 px}主要的射流研究…代码如下:
//不加蒙版放大镜$('.小')。鼠标移动(函数(e) { $(本)).兄弟姐妹('。大')。show();//var e=事件| |窗口。事件;var scrollX=文档。文档元素。滚动| |文档。尸体。被偷窃;//滚动条距离屏幕左边的宽度var scrollY=文档。文档元素。向上滚动| |文档。尸体。滚动顶部;//滚动条距离屏幕上面的高度//e.pageX相对于文档左边的高度//e.pageY相对于文档上面的高度//e.clientX相对于屏幕左边的高度//e.clientY相对于屏幕上面的高度var xx=e . PageX | | e . ClientX scrolLx;//相对于文档左边的宽度var YY=e . pagey | | e . clienty scrollY;//相对于文档上面的高度//.偏移量()。顶端元素相对于文档上面的位置//.偏移量()。左边的元素相对于文档左面的位置var y=yy-$(这个)。偏移量()。顶部;//鼠标相对于元素的x,y坐标var x=xx-$(这个)。偏移量()。向左;var width=$(this).宽度();var lwidth=$(this).兄弟姐妹('。大')。查找(' img ').宽度();//按照大图与小图的比例来进行移动的var left=x/width * lwidth/2;var height=$(this).高度();var LH三=$(这个).兄弟姐妹('。大')。查找(' img ').高度();var top=y/高度*左侧h8/2;$(这个)。兄弟姐妹('。大')。查找(' img ').css({left:-left,top :-top });//控制台。日志(x '-' y);//不加蒙版放大镜结束//蒙版跟着动var twidth=$(this).查找('。工具')。宽度();var theight=$(this).查找('。工具')。高度();var tleft=x-twi DTH/2;var ttop=y-theight/2;if(tle ft 0){ tle ft=0;} if(tleft width-twi DTH){ tleft=width-twi DTH;} if(ttop 0){ ttop=0 } if(ttophat-theight){ ttop=height-theight;} $(这个)。查找('。工具')。CSS({左:左,顶:顶});});效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。