核心代码如下:
$(function(){
var mousex = 0; //鼠标移动的位置x
var mousey = 0; //鼠标移动的位置y
var maxleft = 0; //最右边
var maxtop = 0; //最下边
var markleft = 0; //放大镜移动的左部距离
var marktop = 0; //放大镜移动的顶部距离
var perx = 0; //移动的x百分比
var pery = 0; //移动的y百分比
var bigleft = 0; //大图要移动left的距离
var bigtop = 0; //大图要移动top的距离
//改变放大镜的位置
function updatamark($mark){
//通过判断,让小框只能在小图区域中移动
if(markleft<0){
markleft = 0;
}else if(markleft>maxleft){
markleft = maxleft;
}
if(marktop<0){
marktop = 0;
}else if(marktop>maxtop){
marktop = maxtop;
}
//获取放大镜的移动比例,即这个小框在区域中移动的比例
perx = markleft/$(".small").outerwidth();
pery = marktop/$(".small").outerheight();
bigleft = -perx*$(".big").outerwidth();
bigtop = -pery*$(".big").outerheight();
//设定小框的位置
$mark.css({"left":markleft,"top":marktop,"display":"block"});
}
//改变大图的位置
function updatabig(){
$(".big").css({"display":"block","left":bigleft,"top":bigtop});
}
//鼠标移出时
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠标小图上移动时
function imgmousemove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠标在小图的位置
mousex = event.pagex-$this.offset().left - $mark.outerwidth()/2;
mousey = event.pagey-$this.offset().top - $mark.outerheight()/2;
//最大值
maxleft =$this.width()- $mark.outerwidth();
maxtop =$this.height()- $mark.outerheight();
markleft = mousex;
marktop = mousey;
updatamark($mark);
updatabig();
}
$(".small").bind("mousemove",imgmousemove).bind("mouseleave",cancle);
})
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论