用JS实现PC端淘宝查看商品图片放大镜效果

一、前言

        今天翻阅文件夹看到了之前写过的一个 js 放大镜特效.之所以想要发布在博客上,是因为觉得这个特效里面包含有一定量程度的 js 常用知识点和逻辑性,觉得发出来挺好的,我自己也能在复习掌握一下.我们废话不多说,开整!

二、图示淘宝商品放大镜效果

        我这里放了两张从淘宝网上随意点开的商品,查看放大镜效果的图片.也好让我们知道最终效果是什么样和有什么步骤.

图1

图2

        以上只是两张静态图,可能没让你们理解那么到位,没看懂的铁子们可以去淘宝pc端随便点击一个商品,我们就能看到这个放大镜效果. 其实它所表述的就是当你移动到下面小图片时,上面左边的图片会显示你移动到的那个小图的图片,并且小图会显示增加黑色边框的效果.然后当你移动左边大图时,右边会显示出一个按照一定比例的大图. 好了,大概就是这样的.

三、需要掌握的知识点

• Event 事件源
• 鼠标移动移出事件
• css transform 动画
• 事件委托

以上三个知识点没有什么可说的,我大概说一下这个事件委托
什么是事件委托?
利用冒泡的原理, 把事件加到父级上, 触发执行效果
好处?
1.提高性能
2.新添加的元素还会有之前的事件

四、放大镜实现原理

1. 在网页中创建两个相同大小的div块,左边的放入图片,设置图片宽高100%,右边的不设置图片百分之百.设置 css 属性超出隐藏.
2. 给左边图片设置一个小方块为了让以后让小方块和右边放大的图片完美显示,需要获取一个比例,
3. 用右边div的宽高除以右边图片宽高,获得比例,然后让左边div块乘以这个比例,这个大小就是小块的比例
4. 当鼠标在左边div内移动的时候,要根据鼠标位置跟随移动,然后限制它的区域,不能移动到这个div块的外面
5. 获取左边的水平移动值,用css动画然后让右边取相反的值移动
6. 设置一些小细节,刚打开网页,或者没有在左边div移动时,让小块和右边的div块隐藏
7. 在左边div小块移动时,让小块和右边div块显示
8. 刚打开网页时,让选中添加的样式隐藏
9. 用ul li标签,在li标签里面放入图片,进行样式排版,设置自定义选中时添加的样式
10. 进行判断,如果移入当前小图,添加样式,并且在上面大图显示当前的图片
11. 离开那个小图时,删除这个添加的样式

五、放大镜代码及注释

        我在写这个文件的时候,将 js, css,image,html都分离出了各自的文件夹.以让这个代码显得不会太乱

image 图片:

这个我就不在展示了,可以自行找到相同大小的图片,也可以去淘宝网页在调试台中点击图片,找到对应的图片,进行下载就可以了

css 样式 :

/* 放大镜特效样式 */

/* 左边,右边div块 */
#left,#right {
   
    width: 400px;
    height: 400px;
    /* border: 1px solid red; */
    float: left;
    margin: 50px 100px 20px;
    position: relative;
    overflow: hidden;
}

/* 左边div块内的移动小块 */
.mask {
   
    background-color: rgba(0,0,255,0.3);
    position: absolute;
    left: 50px;
    top: 50px;
}


/* 选项卡样式 */

/* 选项卡div块 */
.xiaoTuList{
   
    width: 400px;
    height: 300px;
    margin-left: 100px;
    position: absolute;
    list-style: none;
    padding: 0px;
    margin-top: 0px;
}

/* 小图div样式 */
.imgXT {
   
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    width: 55px;
    height: 55px;
}

/* 小图图片宽高显示 */
.imgXT img {
   
    width: 100%;
    height: 100%;
}

/* 定义的一个清除浮动的 class 类 */
.clearFix{
   
    clear: both;
}

/* 选中时添加的样式 */
.Style