电商放大镜及动态边框效果

本文长度为 2772 ,建议阅读 7 分钟

  大家在网购的时候一定没少用过此功能吧~某宝某猫某东,在PC端所有商品的展示均是如此:鼠标放在缩略图上,旁边便会有细节图展示出来,并随鼠标移动展示相应缩略图细节。下面我用js(jq)来展示一下,并且加入一丢丢的动态边框效果。

效果

环境及语言

  • html
  • css
  • js / jq

思路

  • 放大镜
    1. 缩略图及细节图布局
    2. 鼠标划入事件:鼠标放在缩略图,出现小的蒙层和细节图;当鼠标移动,细节图随之变化
    3. 鼠标及蒙层边界判断处理
    4. 鼠标移除事件:隐藏蒙蒙层及细节图
  • 动态边框
    1. 鼠标悬浮,边框出现
    2. 鼠标移除,边框消失

那么问题来了,细节图怎么随鼠标变化?边框以何种形式展现?

实现

由浅入深,我先来实现动态边框

1. 动态边框

效果
思路

看到该效果,一般思路有二:

  1. 设置border
  2. 周边4个div

  但是以上两个思路均有问题。如果设置border,如何使其边框动画?如果周边设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗?首先,动画是一定要有的。其次,如果不能用border,那么用background怎么样呢? justdoit.

新属性 linear-gradient() 函数

inear-gradient函数作为css3新属性,用于创建一个线性渐变的“图像”。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

代码
// html 
<div class="transBorder">
    here
</div>

// css
.transBorder {
    margin: 0 15px;
    cursor: pointer;
    display: block;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    transition: ease-in .4s;
    background: linear-gradient(0, #108b96 2px, #009606 2px) no-repeat,
    linear-gradient(-90deg, #96645f 2px, #961478 2px) no-repeat,
    linear-gradient(-180deg, #869660 2px, #544996 2px) no-repeat,
    linear-gradient(-270deg, #439638 2px, #308e96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
}
.transBorder:hover {
    border-radius: 20%;
    background-size: 100%  5px ,  5px 100%, 100% 5px, 5px 100%;
}

2. 放大镜

效果
思路

  • 鼠标移入
    1. 显示蒙层及细节图
    2. 指定蒙层位置
    3. 为蒙层及细节图做相关计算,如蒙层中心、细节图走向等
    4. 鼠标及蒙层边界判断及处理
    5. 细节图展示及变化
  • 鼠标移除 蒙层及细节图隐藏
代码
// html 
<div class="small">
    <div id="small">
        <img src="./img/small.png" alt="" width="100%">
        <div id="modal"></div>
    </div>
</div>
<div id="big">
    <img src="./img/big.png" alt="" id="bigImg">
</div>

// css
// ...略

// js
$('#small').mousemove((e) => {
    // 显示大图区域
    $('#big, #modal').fadeIn(500);
    // 指定蒙层位置,随鼠标变化
    let x = e.clientX - $('#small').offset().left - $("#modal").width() / 2 + 'px';
    var y = e.clientY - $("#small").offset().top - $("#modal").height() / 2 + 'px';
    $('#modal').css({'top': y, 'left': x});

    // 小图和蒙层的宽高差
    let maxW = $('#small').width() - $('#modal').width();
    let maxH = $('#small').height() - $('#modal').height();

    // 蒙层距离小图边界值
    var l = $('#modal').offset().left - $('#small').offset().left;   // 蒙层距离左边界距离
    var t = $('#modal').offset().top - $('#small').offset().top;     // 蒙层距离上边界距离

    // 边界判断
    // 到达左边距 固定left
    if (l < 0){
        $('#modal').css('left', '0');
    }
    // 到达上边距 固定top
    if (t < 0){
        $('#modal').css('top', '0');
    }
    // 到达右边距 固定left
    if (l >= maxW){
        $('#modal').css('left', maxW);
    }
    // 到达下边距 固定top
    if (t >= maxH){
        $('#modal').css('top', maxH);
    }
    // 鼠标滑动轨迹及大图相应变化
    let l1 = ($('#modal').offset().left - $('#small').offset().left) < 0 ? 0 : ($('#modal').offset().left - $('#small').offset().left);
    let t1 = ($('#modal').offset().top - $('#small').offset().top) < 0 ? 0 : ($('#modal').offset().top - $('#small').offset().top);
    let scaleX = (l1 / maxW) * ($('#big').width() - $('#bigImg').width()) + 'px';
    let scaleY = (t1 / maxW) * ($('#big').height() - $('#bigImg').height()) + 'px';
    $('#bigImg').css({'left': scaleX,'top': scaleY});
}).mouseleave(() => {
    // 鼠标离开小图,大图消失
    $('#big, #modal').fadeOut(500);
})

vue弹窗屏蔽滑动的两种解决方案

vue中引入并使用markdown编辑器

vue-cli 解决白屏、兼容、压缩及清除console

嗨,你在看吗~

本文分享自微信公众号 - 流眸(zxm0146)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏女程序员的日常_Lin

Vue SSR

vue.js是构建客户端应用程序的框架,在默认情况下,在浏览器输出Vue组件,进行生成DOM和操作DOM。Vue SSR 就是实现将组件渲染为服务器端的HTML...

81410
来自专栏前端小吉米

微信开放文档是个病,得治!

以前,微信开放文档是使用文档界的老大哥— gitbook。用它搭建文档其实并不需要耗费多长时间,主要在于界面维护和自定义主题。Jquery 则是里面主要用来做前...

13920
来自专栏较真的前端

在微信小程序中实现商品曝光的统计

在电商运营的工作中,运营人员需要关心很多数字,除了简单的PV和UV外,还有商品曝光量、商品浏览量、加入购物车、支付量,基于这些数字可以构建漏斗模型,帮助优化各个...

40210
来自专栏萝卜大杂烩

Vue + Flask 小知识(六)

由于我们会有很多请求,都需要验证 token 的有效性,那么把这部分逻辑抽象出来就是最好的选择了。我这里大概想到了以下两种验证的方法

12220
来自专栏一Li小麦

闲话react路由守卫

老外做生意的思路和中国人不太一样,中国人喜欢便宜货,比如说买相机,期望什么都给你配好,还附送一大堆东西。而老外发给你的货干干净净,所谓贵的要命名牌也只不过是廉价...

55130
来自专栏萝卜大杂烩

Vue + Flask 小知识(五)

认证:判定用户的合法性,一般是判断是否已经登陆 鉴权:判断用户的权限,一般是判断用户是否可以继续继续某个操作

15120
来自专栏前端达人

十款热门的Vue.js工具和库

随着Vue.js越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经...

33220
来自专栏京程一灯

用 ref 访问 Vue.js 程序中的 DOM[每日前端夜话0x9C]

本文适用于所有使用 Vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:

8820
来自专栏萝卜大杂烩

Vue + Flask 小知识(四)

首先有一个简单的表单,一个必填的输入框,一个 textarea 类型输入框,还有两个多选的下拉框 页面效果如下:

7220
来自专栏前端达人

Vue中组件之间8种通信方式,值得收藏

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关...

13030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励