码迷,mamicode.com
首页 > 其他好文 > 详细

图片动态化

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

标签:http   osi   class   tin   tor   www.   inter   val   ==   

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 属性

图片动态化

标签:http   osi   class   tin   tor   www.   inter   val   ==   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!