平时做移动端项目比较多，特别是微信h5这种，展示类的页面，特效比较多，有的动态效果技术可以直接实现，有的就不好实现，就要设计帮忙做gif图处理。但是有一个问题，就是gif图一般都很大，素材这方便，h5不适合太大的素材，这样预加载图片的时候，会很慢，一般用户不会等这么长时间的loading。而且gif图不能压缩，压缩了的话，gif图会失真。所以，一般都是要让设计导出来每一帧，让图片进行有顺序的切换展示。就形成了和gif图一样的效果，话不多说，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
.switch{
width: 50vw;
height: 50vw;
position: relative;
}
.switch img{
position: absolute;
width: 100%;
height: auto;
display: none;
}
.switch img:nth-child(1){
display: block;
}
</style>
</head>
<body>
<div class="switch">
<img src="http://weima.zhijin101.com/applyhtml/img/gif16.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif15.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif14.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif13.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif12.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif11.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif10.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif9.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif8.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif7.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif6.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif5.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif4.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif3.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif2.png" alt="" />
<img src="http://weima.zhijin101.com/applyhtml/img/gif1.png" alt="" />
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var len = $('.switch img').length-1;
var index = 0;
function aniFn(){
if(index>=len){
$(".switch img").eq(0).hide();
$(".switch img").eq(15).show();
index=0;
}else{
$(".switch img").eq(len-index).hide();
$(".switch img").eq(len-index-1).show();
index++;
}
setTimeout(function(){
aniFn();
},200)
}
aniFn();
</script>
</html>
具体的思路是这样子的，让图片都定位在一个地方，第一帧的图片放在最上面，按顺序排好，然后让它一次切换，如果切换到最后一帧了，那么就重新再来一遍。需要注意的是，这些图片要做预加载，如果预加载的话，可能刚开始会出现画面闪烁。
网友评论