实现jquery放大镜的两种方法

2023-09-16 06:43:05 156

*{padding:0;margin:0;} #father.small{width:50px;height:50px;border:2pxsolid#ccc;bottom:0;position:absolute;} #father.second{left:70px;} .third{left:140px;} #father{position:relative;top:100px;left:50px;height:460px;} #container{position:absolute;width:400px;height:400px;} #containerimg{position:absolute;display:none;} .shade{width:200px;height:200px;position:absolute;background:#000;opacity:0.4;top:0; left:0;display:none;} .big{width:400px;height:400px;position:absolute;top:100px;overflow:hidden;left:500px;display:none;} .bigimg{width:800px;height:800px;position:absolute;display:none;}

$(function(){ changePic('.first',0); changePic('.second',1); varshadeWidth=$('.shade').width(),//阴影的宽度 shadeHeight=$('.shade').height(),//阴影的高度 middleWidth=$('#container').width(),//容器的宽度 middleHeight=$('#container').height(),//容器的高度 bigWidth=$('.big').width(),//放大图片盒子的宽度 bigHeight=$('.big').height(),//放大图片盒子的高度 rateX=bigWidth/shadeWidth,//放大区和遮罩层的宽度比例 rateY=bigHeight/shadeHeight;//放大区和遮罩层的高度比例 //当鼠标移入与移出时阴影与放大去显现/消失 $('#container').hover(function(){ $('.shade').show(); $('.big').show(); },function(){ $('.shade').hide(); $('.big').hide(); }).mousemove(function(e){//当鼠标移动时，阴影和放大区图片进行移动 //记录下光标距离页面的距离 varx=e.pageX, y=e.pageY; //设置遮罩层的位置 $('.shade').offset({ top:y-shadeHeight/2, left:x-shadeWidth/2 }); //获取遮罩层相对父元素的位置 varcur=$('.shade').position(), _top=cur.top, _left=cur.left, hdiffer=middleHeight-shadeHeight, wdiffer=middleWidth-shadeWidth; if(_top<0)_top=0; elseif(_top>hdiffer)_top=hdiffer; if(_left<0)_left=0; elseif(_left>wdiffer)_left=wdiffer; //判断完成后设置遮罩层的范围 $('.shade').css({ top:_top, left:_left }); //设置放大区图片移动 $('.bigimg').css({ top:-rateY*_top, left:-rateX*_left }); });; //封装的改变图片显示的函数 functionchangePic(element,index){ $(element).click(function(){ $('#containerimg').eq(index).css('display','block').siblings().css('display','none'); $('.bigimg').eq(index).css('display','block').siblings().css('display','none'); }); } });

*{padding:0;margin:0;} #father.small{width:50px;height:50px;border:2pxsolid#ccc;bottom:0;position:absolute;} #father.second{left:70px;} .third{left:140px;} #father{position:relative;top:100px;left:50px;height:460px;} #container{position:absolute;width:400px;height:400px;} #containerimg{position:absolute;display:none;} .shade{width:200px;height:200px;position:absolute;top:0;left:0;display:none;border-radius:50%;overflow:hidden;background:#000;} .shadeimg{display:none;width:800px;height:800px;position:absolute;}

$(function(){ changePic('.first',0); changePic('.second',1); changePic('.third',2); varshadeWidth=$('.shade').width(),//阴影的宽度 shadeHeight=$('.shade').height(),//阴影的高度 middleWidth=$('#container').width(),//容器的宽度 middleHeight=$('#container').height(),//容器的高度 bigImgWidth=$('.shadeimg').width(),//放大图片盒子的宽度 bigImgHeight=$('.shadeimg').height(),//放大图片盒子的高度 rateX=bigImgWidth/middleWidth,//放大区和遮罩层的宽度比例2 rateY=bigImgHeight/middleHeight;//放大区和遮罩层的高度比例2 //当鼠标移入与移出时阴影与放大去显现/消失 $('#container').hover(function(){ $('.shade').show(); $('.big').show(); },function(){ $('.shade').hide(); $('.big').hide(); }).mousemove(function(e){//当鼠标移动时，阴影和放大区图片进行移动 //记录下光标距离页面的距离 varx=e.pageX, y=e.pageY; //设置遮罩层的位置 $('.shade').offset({ top:y-shadeHeight/2, left:x-shadeWidth/2 }); //获取遮罩层相对父元素的位置 varcur=$('.shade').position(), _top=cur.top, _left=cur.left, hdiffer=middleHeight-shadeHeight, wdiffer=middleWidth-shadeWidth; if(_top<0)_top=0; elseif(_top>hdiffer)_top=hdiffer; if(_left<0)_left=0; elseif(_left>wdiffer)_left=wdiffer; //判断完成后设置遮罩层的范围 $('.shade').css({ top:_top, left:_left }); //设置放大区图片移动 $('.shadeimg').css({ top:-_top*rateY*3/2, left:-_left*rateX*3/2 }); });; //封装的改变图片显示的函数 functionchangePic(element,index){ $(element).click(function(){ $('#containerimg').eq(index).css('display','block').siblings().css('display','none'); $('.shadeimg').eq(index).css('display','block').siblings().css('display','none'); }); } });

实现jquery放大镜的两种方法

热门推荐

随机推荐