首页 > 其他 > 详细

图片动态化

时间:2018-10-27 19:08:08      阅读:156      评论:0      收藏:0      [点我收藏+]

1. html

<div class="image-gif"></div>

2. css

<style type="text/css">
.image-gif {
width: 200px;
height: 300px;
background: url(image-gif.jpg);
background-position: 0px 0px;
}
</style>

3. js

<script>
var imageGif = document.querySelector(".image-gif");
var left = 0,
pos;
setInterval(function () {
left = left == 1600 ? 0 : left + 200;
pos = -left + "px 0px";
imageGif.style.backgroundPosition = pos;
}, 100);
</script>

 

CSS background-position 属性

图片动态化

原文:https://www.cnblogs.com/justSmile2/p/9862625.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!