仿淘宝商品放大展示效果制作（放大镜效果）

如果您觉得这篇文章有用，欢迎点赞收藏或有什么建议请在评论区留言，我看到后会第一时间回复的，谢谢！

（分享时刻）

mac上取色比较好用的小工具：啜色；
好用的截屏小工具：Snipaste （常用的一个功能是可以将截图放在其他页面的顶部，尤其是在写css结构时非常方便!）

接上篇玩转网页倒计时

通过这篇文章，大家可以了解到：
① 怎么制作放大效果的案例
② 怎样将鼠标置于方框的中心
③ 计算元素移动过程中的相对位置以及两个移动元素之间的数学关系

无人能阻挡我shopping的热情，尤其是在期盼已久的新品上架时，定要瞅个仔仔细细。可图片太小看不清怎么办？先别急，商家平台早已为此做出了商品放大展示效果！！！

先展示一下淘宝网页某5G手机放大展示效果。为了更好的体验，大家可以移步到该链接某5G手机放大展示效果

然后我就对该放大展示效果进行了模仿，下面是我的效果图：

仿淘宝商品放大展示效果制作（放大镜效果）

由于代码量较多，为了大家阅读的方便，我将css 以及js 分开书写，然后引入html中（代码里做了非常详细的注释）。

Html模块
（注意：要将css样式表和js效果引入html中，曾今的坑，调了好久，最好才发现没有引入，切记！！！）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="main.css"/><script src="main.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 思路：我将小方框和大盒子放在一个盒子里，然后隐藏，当满足条件时使用js对其显示（淘宝的做法它们不在一个盒子里，是分开的，但我个人认为这样后期不好管理代码） --><div class="box"><img src="phone1.jpg"">   <!-- 小图 --><div class="blueBox"></div><div class="phone2">    <!-- 放大展示的盒子 --><img src="phone2.jpg" class="img_phone2">   <!-- 放大的图片 --></div></div></body>
</html>

css模块(main.css)

* {/* 个人习惯,清除所有元素内外边距 */margin: 0;padding: 0;
}
.box {position: relative;top: 90px;left: 40px;width: 430px;    /* 根据图片宽高设置盒子的宽高 */height: 430px;border: 1px solid #F0F0F0;cursor: move;    /* 在小盒子内部,改变鼠标形状 */
}
.blueBox {display: none;     position: absolute;top: 0;left: 0;width: 230px;height: 234px;background-color: #779CDF;opacity: .5;      透明度设置,这样才能看到下面的图片
}
.phone2 {     display: none;position: absolute;top: 0;left: 440px;width: 430px;     /* 保持两个盒子宽高一致,这样好让小方框内的内容和放大盒子里的内容一致 */height: 430px;overflow: hidden;z-index: 999;     /* 保证大盒子在其他内容的上面 */
}
.img_phone2 {position: absolute;top: 0;left: 0;
}

js模块（main.js）

window.addEventListener('load', function(){  //因为是外部js引入，只有在dom加载完成后才调用js，因此需要加该代码//获取关键元素(也可以在需要的时候进行获取,最后写到开头,个人习惯)var box = document.querySelector('.box');    var phone2 = document.querySelector('.phone2');var blueBox = document.querySelector('.blueBox');var img_phone2 = document.querySelector('.img_phone2');//当鼠标进入小盒子，显示小方框和大盒子，注意不要将显示和后面的元素操作都用mousemove事件，好像会将样式层叠，所以先使用mouseover事件最好box.addEventListener('mouseover', function(){blueBox.style.display = 'block';phone2.style.display = 'block';})//当鼠标移出盒子，隐藏小方框和大盒子box.addEventListener('mouseout', function(){blueBox.style.display = 'none';phone2.style.display = 'none';})//给盒子添加鼠标移动事件box.addEventListener('mousemove', function(e){var x = e.pageX - this.offsetLeft;   //获取鼠标相对小盒子的位置var y = e.pageY - this.offsetTop;var blueBox_X = x - blueBox.offsetWidth / 2;   //让鼠标位于小方框中心var blueBox_Y = y - blueBox.offsetHeight / 2;//限制小方框的活动范围，即只能在小盒子内部进行移动blueBox_X_Max = box.offsetWidth - blueBox.offsetWidth;  //小方框最大能移动距离if (blueBox_X <= 0) {blueBox_X = 0;} else if (blueBox_X >= blueBox_X_Max) {blueBox_X = blueBox_X_Max;} blueBox_Y_Max = box.offsetHeight - blueBox.offsetHeight;if (blueBox_Y <= 0) {blueBox_Y = 0;} else if (blueBox_Y >= blueBox_Y_Max) {blueBox_Y = blueBox_Y_Max;} blueBox.style.left = blueBox_X + 'px';  //小方框在小盒子内移动距离blueBox.style.top = blueBox_Y + 'px';//让大图片跟随小方框运动//大图片的移动距离计算公式://小方框移动距离 / 小方框最大移动距离  =  大图片移动距离 / 大图片最大移动距离//因此: 大图片移动距离 = 大图片最大移动距离 * 小方框移动距离 / 小方框最大移动距离img_phone2_X_Max = img_phone2.offsetWidth - phone2.offsetWidth; //大图片最大能移动的距离img_phone2_Y_Max = img_phone2.offsetHeight - phone2.offsetHeight;img_phone2_X = img_phone2_X_Max * blueBox_X / blueBox_X_Max;img_phone2_Y = img_phone2_Y_Max * blueBox_Y / blueBox_Y_Max;img_phone2.style.left = - img_phone2_X + 'px';  //大图片移动方向与小方框移动方向相反img_phone2.style.top = - img_phone2_Y + 'px';})
})

如果大家喜欢，就请点个赞吧！（每篇文章前都有一个深夜，因为总想把最好的分享给大家）

本人初学前端，想往全栈发展。有时间会更一些学习过程中的小技巧或心得体会！有兴趣的伙伴可以加我一起学习，共同进步！

仿淘宝商品放大展示效果制作（放大镜效果）相关推荐

Android 仿淘宝商品详情页下拉足迹Demo
DropDownMultiPager 仿淘宝等商品详情页下拉足迹效果SimpleDemo 可colne之后看MainActivity的调用,方便二次开发依赖 compile 'com.nineold ...
仿淘宝商品浏览界面，向上拉查看详情
最新项目中有展示类似淘宝商品详情的功能,主要实现向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/d ...
Android开发之仿淘宝商品详情页
看到有人在问如何实现淘宝商品详情页效果,手痒了就撸了一个,献上效果图大致梳理一下思路,这里不提供源码状态栏透明使用开源库StatusBarCompat,为了兼容手机4.4 dependencies ...
仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.
仿淘宝商品界面（html div+css)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
仿淘宝商品详情页图片滑动并且数字也跟着变化
今天遇到需求需要做个淘宝那样的商品详情页如图(这里只差放图片了)支持移动端,当然用的是swiper.js支持左右滑动上代码 html代码 <div class="swiper-con ...
仿淘宝商品详情页面Android
[致谢]:qifengdeqingchen [博客地址]:http://blog.csdn.net/qifengdeqingchen/article/details/51659735 1.需求: 要实 ...
vue.js客服系统实时聊天项目开发（十八）仿淘宝商品页面点在线客服传递产品卡片...
我们在使用淘宝的时候,在商品页面点击在线客服,跳转到客服聊天页以后,会浮动出当前产品信息,可以把产品信息发给客服现在我们也实现了类似功能,可以带着产品信息进聊天页面在访客聊天连接中,加入extra ...
android app实现轮播的图片视频播放video，仿淘宝商品详情的视频播放（android）
这段时间在学习开发android app 记录一下实现仿淘宝图片视频切换的功能,直接拿来用即可,大家有什么问题可以共同交流先看一下目录结构吧思路: ViewPager 分别实现三个类型的滑动–fr ...

仿淘宝商品放大展示效果制作（放大镜效果）

仿淘宝商品放大展示效果制作（放大镜效果）

仿淘宝商品放大展示效果制作（放大镜效果）相关推荐

最新文章

热门文章