用简单的代码让一组静态图片变成gif动画
来源:互联网 发布:恶意软件分析实战 编辑:程序博客网 时间:2024/04/28 11:21
比如这组图片:
变成这样的gif动画:
是不是很神奇。。。。
先看html 、样式。很简单,一个div,然后引入图片。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>动态效果</title><style type="text/css">.anim{width :200px;height : 300px;background:url(animl1.jpg) ;background-position : 0px 0px;}</style></head><body><div class="wrapper"><div class="anim"></div></div> </body></html>
再看js:
var anim = document.querySelector(".anim");var left = 0;setInterval(function(){left +=200;if(left==1600){left = 0;}
anim.style.backgroundPosition = -left+"px 0px";},100);
这就OK了!
原理在于background-position(背景图像的起始位置)设置200px的宽度主要是因为这组每一部分宽度为200px,根据background-position的作用,在定义left的偏移量。为什么最后left前面要加上-呢?这组图片是递进关系,随着往右的偏移,背景图片在向左递减。比如background-position:200px 0px;它是以容器的左上角为参考,向左偏移200px,也就成为这样:
第一幅图就向左偏移200px,消失在显示范围内了。
然后当它为-1600px时,到达最后一幅图,把left设置0,又重新开始。再根据setInterval()方法,无限循环,就得到了gif动态效果。
0 0
- 用简单的代码让一组静态图片变成gif动画
- QQ2013登录界面动画变成静态图片的解决方法
- 如何避免上传gif到数据库时变成静态图片
- 我的iOS学习历程 - UISlider(简单的设置一组图片动画)
- Outlook中的gif动画显示为静态图片
- PhotoShop cc合并多张静态图片为gif动画
- Java之简单的图片动态显示(实现类似GIF动画结果)
- iOS 简单的播放gif动画
- iOS 简单的播放gif动画
- iOS 一个简单的GIF动画
- 【ImageMagick】用convert制作gif图片动画
- 让写代码变成简单的copy操作,代码生成器之一---------android,findViewById
- 【 让你的磁盘背景变成图片 】
- 【代码】PHP 生成GIF动画实现动态图片验证码
- 国家纪念日,让你的网站全站和图片变成灰色代码
- 使用一组图片播放动画
- UIImageView 播放一组图片动画
- 如何让一组图片旋转
- windows 下 安装PHP 扩展 xdebug 调试工具
- iOS支付宝开发流程与常见的问题
- IO
- jsp中的JSTL与EL表达式用法及区别
- leecode 解题总结:35. Search Insert Position
- 用简单的代码让一组静态图片变成gif动画
- HTML学习笔记(一)
- 一个新手对从事软件开发的领悟
- html 总结1(2017.2.8pm)
- 12 java web项目中的classpath以及环境变量classpath和path
- H264(NAL简介与I帧判断)
- 动态调用有关的方法?
- Android 知识点梳理
- nginx lua 限制流量脚步