邹城手机网站建设,南昌网站设计,优秀企业网站建设价格,电商小程序模板目录
1. 背景
2. 分析
3. 代码实现 1. 背景
最近在项目中发现一个有意思的小需求#xff0c;鼠标移入一个盒子里#xff0c;然后盒子里的图就开始动起来#xff0c;就像一个gif一样#xff0c;然后鼠标移出#xff0c;再按照原来的变化变回去#xff0c;就像变形金刚…目录
1. 背景
2. 分析
3. 代码实现 1. 背景
最近在项目中发现一个有意思的小需求鼠标移入一个盒子里然后盒子里的图就开始动起来就像一个gif一样然后鼠标移出再按照原来的变化变回去就像变形金刚一样首先鼠标移入从车变成机器人鼠标移出然后从机器人变回车。 2. 分析
实现这样一个需求的前提是UI需要给你提供这样一张图这个图是由多个连续的画面一起构成的一张图如下这张我在网上随便找的图。其实这是一张图只不过这张图由很多连贯的图一起组成的当我们将各个独立的画面移动到可视窗口时那么看起来就像是一个动态图一样。
然后我们来分析如何实现首先我们要有一个div然后设置这个div的background为这张图片假设这个div宽150px这张图宽1500px那么浏览器呢就会默认显示这张图的前150px也就是将这张图的最左端显示在div上。那么我们的可视窗口就是这150px看到的就是这张图里的第一个小图。然后我们通过js的循环计时器setInterval来动态改变这个图的backgroundPositionX如果UI提供的图是竖直的那么就动态改变backGroundPositionY。 3. 代码实现
HTMLCSS
templatediv classcontainerdivclassimgContainermouseenterhandleMouseEntermouseleavehandleMouseLeavediv classimg refimgRef/div/div/div
/templatestyle scoped
.container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
}
.imgContainer {width: 150px;height: 300px;
}
.img {width: 100%;height: 100%;background: red;background: url(/assets/lotsImg.png);background-position: 0 0;
}
/style
js部分
在mouseEnter函数中我们先设置循环定时器然后在interValFun里设置具体逻辑这里的if(num 12)要根据UI提供的图片自己来设定因为我找的这个图一共有12个小图所以是12然后具体的-${num * 136}px这里具体要乘以多少也要根据图片的渲染大小来计算。如下图 1636 / 12 约等于 136所以我设置的136px。 在mouseLeave函数中首先先清楚之前的定时器然后获取当前图片的backGroundPositionX值然后如果这个值小于等于0就一直重复的更新backGroundPositionX值如果大于了0说明这个图的位置已经来到了最左端了就可以不用再计算了就清除这个定时器。
import { ref } from vue;const imgRef ref(null);
const interval ref(null);function handleMouseEnter() {interval.value setInterval(interValFun, 80);let num 0;function interValFun() {num;if (num 12) {imgRef.value.style.backgroundPositionX -${num * 136}px;}}
}function handleMouseLeave() {clearInterval(interval.value);let currentPosition parseFloat(imgRef.value.style.backgroundPositionX);const interValConst setInterval(interValFun, 80);function interValFun() {if (currentPosition 0) {imgRef.value.style.backgroundPositionX ${currentPosition}px;} else {clearInterval(interValConst);return;}currentPosition currentPosition 136;}
}
最后实现的效果如图 动态图例子
