鼠标跟随
话不多说同样先上效果图再上代码
效果图：
鼠标跟随.gif
文件结构图
1569809888816.png
代码
css
*{
margin: 0;
padding: 0;
}
.clearfix:after{ /*清除浮动*/
display: block;
height: 0;
content: '';
clear: both;
}
.container{
position: relative;
margin: 20px auto;
width: 462px;
height: 77px;
}
.container .imgBox li{
float: left;
margin-right: 18px;
list-style: none;
border: 1px solid #000000;
width: 100px;
height: 75px;
overflow: hidden;
box-shadow: aliceblue 0 0 5px 5px;
}
.container .imgBox li:nth-last-child(1){
margin-right: 0;
}
.container .imgBox li img{
display: block;
width: 100%;
height: 100%;
}
.container .mark{
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
width: 400px;
height: 300px;
box-sizing: border-box;
}
.container .mark img{
display: block;
width: 100%;
height: 100%;
box-shadow: aliceblue 0 0 5px 5px;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mouse-flow.css">
</head>
<body>
<!--如果小图和大图在名字上“没有固定的规则”，我们吧大图地址都以自定义属性得方式存储起来，后期需要展示大图的时候，自定义属性获取即可 如：<li><img src="img/images(1).jpg" data-bigger="img/images_1_bigger.jpg" alt=""></li>
如果有固定的规则我们可以不采用自定义属性方式，而是基于规则自己处理和匹配即可.
-->
<!--此案例不采用自定义属性方式-->
<section class="container clearfix">
<ul class="imgBox">
<li><img src="img/images(1).jpg" alt=""></li>
<li><img src="img/images(2).jpg" alt=""></li>
<li><img src="img/images(3).jpg" alt=""></li>
<li><img src="img/images(4).jpg" alt=""></li>
</ul>
<!--<div class="mark"><img src="img/images_1_bigger.jpg" alt=""></div>-->
</section>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="mouse-flow.js"></script>
</body>
</html>
js
let $container=$('.container');
let $imgList=$('.container>ul>li'),
$mark=null;
console.log($imgList);
$imgList.on('mouseover',function (ev) {
console.log(ev);
//动态创建MARK：根据经过的li中的小图片，动态管控MARK中的大图片
let $src=$(this).children('img').attr('src');
$srcStr=$src.replace(/\((\d+)\)/g,'_$1_bigger');
if(!$mark){
$mark=$(` <div class="mark"><img src="${$srcStr}" alt=""></div>`);
$container.append($mark)
}
}).on('mouseout',function (ev) {
//=>移除mark
if($mark){
$mark.remove();
$mark=null //鼠标移出后mark样式清空
}
}).on('mousemove',function (ev) {
//根据鼠标的位置计算出mark的位置
let {top:conTop, left:conLeft}=$container.offset(),
//让mark与鼠标的距离为“20”
curL=ev.pageX-conLeft + 20,
curT=ev.pageY-conTop+20;
//设置mark位置
$mark.css({
top:curT,
left:curL
})
});
实现鼠标跟随的方案
方案一：
每一个LI都是一个大盒子，大盒子存放的是大图，开始是隐藏的，鼠标进入到LI中，让其显示，并且让他的位置跟随鼠标的位置改变即可，鼠标离开LI让自己的大盒子消失即可（类似于放大镜SMALL-BOX中出现的MARK） 方案二：
只有一个大盒子（可以在JS中动态的创建，也可以事先写好，控制显示隐藏），鼠标进入任意的LI都让大盒子中存放的图片根据进入的LI动态的改变，同样实现鼠标移动，让大盒子也跟随移动
网友评论