插件:商品放大镜

2018-01-13 11:05:31来源:segmentfault作者:yuezhongbao人点击

分享

看之后搜:http://www.cnblogs.com/yzb23/... 有助于理解 - -


前言

这段代码我哩哩啦啦写了三天多,平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半(我是分两块写的,
先是让module就是那个遮罩层能自由的在图片上跟随鼠标走,剩下的就简单了,遮罩层的left、top乘以一个固定系数就是‘放大图片’的left、top)。好了我的思路就是:只需要一张图片,这张图片像素要大一点,先以缩小的方式展示,然后鼠标移上去之后,在右侧有一个div,里面也放着一个src相同的img,只不过这个img不再是缩小的了。ok 这样就够了!


 写之前先复习一下:(如图)



记住上面的图
上码


HTML


<div>
<img src="img/01.png" width="300" />
<div></div>
<div>
<img src="img/01.png" alt=""/>
</div>
</div>

css


div.content{
overflow: hidden;
position: relative;
}
img.small{
float: left;
border:1px solid blue;
}
div.large{
float: left;
width:300px;
height:300px;
overflow: hidden;
position: relative;/**/
}
div.large>img{
width:600px;
display: none;
position:absolute;/**/
}
div.module{
width:150px;
height:150px;
background-color: rgba(255,255,255,.3);
border:1px solid #666666;
position:absolute ;
top:0;
left:0;
display: none;
}
div.module:hover{
cursor: move;
}

js



<script>
$('.content').mousemove(function(e){
var mx = e.pageX-$(this).offset().left;
var my = e.pageY-$(this).offset().top;
// 让鼠标在module正中间
var left = mx-$('.module').width()/2;
var top = my-$('.module').height()/2;
if(mx>0&&my>0&&mx<$('.small').width()&&my<$('.small').height()){
// 防止溢出
var L = (left<0)?0:(left>$('.small').width()-$('.module').width())?$('.small').width()-$('.module').width():left;
var T = (top<0)?0:(top>$('.small').height()-$('.module').height())?$('.small').height()-$('.module').height():top;
$('div.module').css('display','block').css('left',L+'px').css('top',T+'px');
// 显示放大照片
var largeLeft = L*$('.large').width()/$('.module').width();//L*(300/150);
var largeTop = T*$('.large').height()/$('.module').height();//T*(300/150);
$('.large>img').css('display','block').css('left',0-largeLeft+'px').css('top',0-largeTop+'px');
}
为什么left:0-largeLeft?
因为你好好想想,你鼠标往左移动时候,div.large中的图片却是向右移动的,鼠标向右移动时,div.large中的图片是向左动的。
鼠标向上移动时,div.large中的图片是向下动的。
鼠标向下移动时,div.large中的图片是向上动的。
所以要用0减去! else{
$('div.module').css('display','none');
// 隐藏放大照片
$('.large>img').css('display','none');
}
})
</script>

是不是很简单,我当时在避免.module溢出的时候费了些时间,



当时我很蠢单独把每个方向都拿出来并且在每个方向下面设置.module的left和top;导致鼠标在移动的时候代码判断使移动发生了冲突,并未达到我想要的效果。
  想想虽然要每个方向都要考虑,但是没必要每判断一次给就给.module赋一次值。
  把left和top单独拿出来考虑,最后在把left、top赋值给.module 如下,更好。


//防止溢出
var L = (left<0)?0:(left>$('.small').width()-$('.module').width())?$('.small').width()-$('.module').width():left;
var T = (top<0)?0:(top>$('.small').height()-$('.module').height())?$('.small').height()-$('.module').height():top;
$('div.module').css('display','block').css('left',L+'px').css('top',T+'px');

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台