插件：商品放大镜

Bamboy 发布于2019-08-22 13:47 / 2566人阅读

摘要：看之后搜有助于理解前言这段代码我哩哩啦啦写了三天多，平时都有活今天忙里偷闲想起之前放大镜这个功能写了一半我是分两块写的，先是让就是那个遮罩层能自由的在图片上跟随鼠标走，剩下的就简单了遮罩层的乘以一个固定系数就是放大图片的。

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

前言

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

　写之前先复习一下：（如图）

记住上面的图
上码

HTML

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;
}

是不是很简单，我当时在避免.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");

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92439.html

[vue插件]基于vue2.x的电商图片放大镜插件

摘要：基于的电商图片放大镜插件动画截图使用步骤安装使用配置图片地址大图地址图片放大倍数放大时页面是否可滚动注意事项组件默认是的高宽，所以建议将组件包含在一个有固定高宽的容器内。最近在撸一个电商网站，有一个需求是要像淘宝商品详情页那样，鼠标放在主图上，显示图片放大镜效果，找了一下貌似没有什么合适的vue插件，于是自己撸了一个，分享一下。小白第一次分享，各位大神莫见笑。 vue-piczoom...

617035918 2019-08-22 13:55 评论0 收藏0
那是我夕阳下的奔跑，电商网站PC端详情页图片放大效果实现

摘要：使用鼠标的坐标值减去遮罩层的一半的宽度，从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件，当鼠标离开商品大图时隐藏遮罩层以及放大镜。在详情页浏览时商品大图还是不能完全看清楚商品的细节，该特效实现鼠标悬停在商品大图上时，在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容，放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为：showImg(https://...

ThreeWords 2019-08-20 18:01 评论0 收藏0
那是我夕阳下的奔跑，电商网站PC端详情页图片放大效果实现

摘要：使用鼠标的坐标值减去遮罩层的一半的宽度，从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件，当鼠标离开商品大图时隐藏遮罩层以及放大镜。在详情页浏览时商品大图还是不能完全看清楚商品的细节，该特效实现鼠标悬停在商品大图上时，在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容，放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为：showImg(https://...

szysky 2019-08-29 12:56 评论0 收藏0
那是我夕阳下的奔跑，电商网站PC端详情页图片放大效果实现

摘要：使用鼠标的坐标值减去遮罩层的一半的宽度，从而得到遮罩层显示的位置。最后添加鼠标离开的监听事件，当鼠标离开商品大图时隐藏遮罩层以及放大镜。在详情页浏览时商品大图还是不能完全看清楚商品的细节，该特效实现鼠标悬停在商品大图上时，在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容，放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为：showImg(https://...

weknow619 2019-08-01 17:09 评论0 收藏0
微信小程序之--（与唯品会来场粉红色的邂逅 ???）

摘要：微信小程序之与唯品会来场粉红色的邂逅买买买，虽然双十二刚过，可是唯品会的折扣却是依然火爆。一打开页面，便是粉色的主页映入眼帘，琳琅满目的商品，让我这个月光族过了把眼瘾。 Welcome to miaomiaoXiongs segmentfault 微信小程序之--（与唯品会来场粉红色的邂逅 ???）买买买，虽然双十二刚过，可是唯品会的折扣却是依然火爆。一打开页面，便是粉色的主页映入...

SnaiLiu 2019-08-01 18:15 评论0 收藏0