欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于jquery的放大镜效果

程序员文章站 2023-11-15 19:18:40
核心代码如下: $(function(){ var mousex = 0; //鼠标移动的位置x var mousey = 0; //鼠标移动的位置y var maxleft = 0; //最右边...

核心代码如下:

$(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);
})


这个里面主要有二点

1.如何大图跟随"放大镜"的位置,同时移动大图?

其实就是用到一个比例关系,当“放大镜”移动多少比例(是比例,不是具体值),大图也同时用这个比例去乘以大图的宽和高,就可以算出大图该移动多少距离了;

2.显示区域和放大镜的关系?

这里的“放大镜”应该和大图的显示区域的比例,应该是大图和小的比例关系一样。比如大图和小图的比例是1:2,那个“放大镜”区域的大小,和显示大图区域的大小比例也应该是1:2,不然“放大镜”罩住的小图区域,和大图的显示区域,所显示的图像信息,不能保持一致。(妙味课堂里讲的那个实例,就是没有保持一至)。