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

  大家在网购的时候一定没少用过此功能吧~某宝某猫某东,在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怎么样呢?just do it.

新属性 linear-gradient() 函数

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

代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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. 细节图展示及变化
  • 鼠标移除
    蒙层及细节图隐藏
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 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);
})
---本文结束感谢您的阅读---

本文标题:电商放大镜及动态边框效果

文章作者:Lomo 朱幸民

发布时间:2019年06月02日 - 16:40:18

最后更新:2019年06月11日 - 16:47:16

原始链接:https://www.zhuxingmin.com/2019/06/02/电商放大镜及动态边框效果/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%