美文网首页让前端飞Web 前端开发
简单商品橱窗放大效果

简单商品橱窗放大效果

作者: kerush | 来源:发表于2017-08-11 16:04 被阅读50次
前端入坑纪 38

眼看着明天便是周末了,来个类似淘宝橱窗展示 那样的简单效果。
感兴趣的,接着往下看哦!这次特意画了图来解释鼠标的“走位”!

OK,first things first!项目链接

喵星人的绝美睡颜
HTML 结构
    <div class="mWrp">
        <div class="navImgsWrp">
            <div id="imgsWrp" class="outWrp">
                ![](wrap/img/pic00.jpg)
            </div>
            <ul class="navImg clear">
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic01.jpg">
                        ![](wrap/img/pic01_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic02.jpg">
                        ![](wrap/img/pic02_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic03.jpg">
                        ![](wrap/img/pic03_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic04.jpg">
                        ![](wrap/img/pic04_nail.jpg)
                    </a>
                </li>
                <li>
                    <a href="javascript:;" data-src="wrap/img/pic05.jpg">
                        ![](wrap/img/pic05_nail.jpg)
                    </a>
                </li>
            </ul>
            <canvas id="can1" width="640" height="400"></canvas>
        </div>
    </div>

ul 里面的 li 都是左浮动,canvas 是相对于 navImgsWrp 绝对定位到 outWrp的右边。

CSS 结构
        body {
            padding: 0;
            margin: 0;
            border-top: 1px solid #f4f4f4;
            background-color: #F4F4F4;
        }
        
        p {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #525252;
        }
        
        img {
            vertical-align: middle;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
        
        .mWrp {
            max-width: 1190px;
            margin: 0 auto;
        }
        
        .navImgsWrp {
            position: relative;
            margin-top: 6px;
            width: 40%;
            background-color: #f7f7f7;
            box-shadow: 0 0 3px #ccc, 0 0 6px #cfcfcf;
        }
        
        .navImg li {
            float: left;
            width: 18.5%;
            margin: 6px .75%
        }
        
        .navImg li a {
            display: block;
        }
        
        .navImg li img {
            width: 100%;
        }
        
        #can1 {
            position: absolute;
            right: -650px;
            top: 0;
            z-index: 9;
            display: none;
            box-shadow: 0 0 3px #ccc, 0 0 6px #f1f1f1;/*兴趣使然,写了个双阴影的效果*/
        }

JS 结构
        var can1 = document.getElementById('can1');
        var navImgsWrp = document.getElementsByClassName('navImgsWrp')[0];
        var imgsWrp = document.getElementById('imgsWrp');
        var targetImg = imgsWrp.getElementsByTagName('img')[0];
        var mls = document.getElementsByClassName('navImg')[0].getElementsByTagName('img');
        var ctx = can1.getContext('2d');
        
        // 创建个canvas要用到的图片对象
        var imgSource = new Image();

        // 当每个li 里的img鼠标滑过时,将橱窗图片变成这个图片,并且将img父级a上的data-src值赋给imgSource.src
        for (var i = 0; i < mls.length; i++) {
            mls[i].onmouseover = function() {
                targetImg.src = this.src;
                imgSource.src = this.parentNode.getAttribute("data-src");
            }
        }

        // 鼠标在imgsWrp滑过时,显示canvas
        imgsWrp.onmouseenter = function() {
            can1.style.display = "block";
        }

        // 鼠标滑出时,隐藏canvas
        imgsWrp.onmouseout = function() {
            can1.style.display = "none";
        }

        // 鼠标在imgsWrp移动时,对应canvas移动的距离,然后绘制到canvas里
        imgsWrp.onmousemove = function(evt) {
            var mouseX = evt.clientX - navImgsWrp.offsetLeft;// imgsWrp里鼠标的坐标 = 鼠标在视窗里滑动的坐标  减去  imgsWrp相对于视窗里的偏移(刚好是父级navImgsWrp的offsetLeft,offsetTop)
            var mouseY = evt.clientY - navImgsWrp.offsetTop;
            var sx = mouseX / imgsWrp.offsetWidth * 640;
            var sy = mouseY / imgsWrp.offsetHeight * 400;
            ctx.drawImage(imgSource, sx, sy, 640, 400, 0, 0, 640, 400)
        }
示意图
  1. 大图是1280宽,800高
  2. drawImage(图片对象,在原图截取点x的坐标,在原图截取点y的坐标,截取的宽度,截取的高度,canvas内开始绘制的点的x坐标,canvas内开始绘制的点的y坐标,绘制的宽度,绘制的高度)
  3. 红框代表截取了原图最左上角时的状态,蓝框代表截取了原图最右下角时的状态。
  4. 鼠标在imgsWrp里移动的过程中,mouseX,mouseY的变化 就是 对应了 示意图中 红点 与 蓝点 间的变化

不晓得这样描述,是否已经把这个表达清楚!感兴趣的小伙伴多多阅读体会下,也可以留言,互相交流!

好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福!

相关文章

  • 简单商品橱窗放大效果

    前端入坑纪 38 眼看着明天便是周末了,来个类似淘宝橱窗展示 那样的简单效果。感兴趣的,接着往下看哦!这次特意画了...

  • 淘宝 模板指南

    商品详情页 橱窗图规范 五张橱窗图 商品描述 通知栏(固定模块) 视频广告 宝贝介绍 实物图 使用效果图 做工细节...

  • 放大镜

    放大镜的效果跟平常我们在电商网站中的商品详情页将商品放大查看的效果是一样的,效果图如下: 布局结构如下: css样...

  • 抖音如何添加佣金商品,抖音视频能添加佣金商品吗?

    抖音商品分享功能俗称商品橱窗,当你开通抖音商品橱窗后,在橱窗中添加商品,点击个人主页”我的商品橱窗-电商工具箱-添...

  • 商品放大镜效果

    html片段 js片段 css片段

  • 抖音商品橱窗开通条件有哪些

    大家都知道抖音目前已经开通了商品橱窗功能,也有很多大V和草根网红已经有了商品橱窗功能。那么这个商品橱窗开通的条件是...

  • 抖音商品橱窗开通方法2018.10.8号

    大家都知道抖音目前已经开通了商品橱窗功能,也有很多大V和草根网红已经有了商品橱窗功能。那么这个商品橱窗开通的条件是...

  • 2018-12-01

    JS实现放大镜功能 网店中的商品都能放大查看细节,这里是放大功能的简单实现。。。。 这个放大镜具有选择放大倍数的功...

  • hover时,商品图片放大效果设置

    之前的写法有很大问题,其实我们用C3的transform:scale(放大倍数)来写的话就是一行代码就可以实现的,...

  • Axure教程:淘宝商品图片放大效果

    效果如下: 一、页面布局 (1)拉入一张大小为400*400和800*800的照片;分别命名为小图和大图,并将大图...

网友评论

    本文标题:简单商品橱窗放大效果

    本文链接:https://www.haomeiwen.com/subject/fmclrxtx.html