用简单的代码让一组静态图片变成gif动画
<!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了!
用简单的代码让一组静态图片变成gif动画的更多相关文章
- mfc显示静态图片最简单的方法
一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...
- 简单的PHP上传图片和删除图片示例代码
分享一例简单的PHP上传图片和删除图片示例代码,很简单,适合初学的朋友参考,用来研究php上传图片还是不错的. 1.php上传图片: <?php if (!empty($_FILES[" ...
- Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)
之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
- 基于FPGA的VGA显示静态图片
终于熬到暑假了,记过三四周的突击带考试,终于为我的大二画上了一个完整的句号,接下来终于可以静心去做自己想做的事情了,前一阵子报了一个线上培训班,学学Sobel边缘检测,之前一直在学习图像处理,但是因为 ...
- FPGA驱动VGA显示静态图片
一 .前言 本文设计思想采用明德扬至简设计法.VGA是最常见的视频显示接口,时序也较为简单.本文从利用显示屏通过VGA方式显示测试图案及静态图片着手带大家接触图像显示应用,算是为后续VGA显示摄像头采 ...
- vue-cil和webpack中本地静态图片的路径问题解决方案
1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...
- 关于 Cookie-free Domains (为什么将静态图片,js,css存放到单独的域名?)
这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...
- vue-cil 和 webpack 中本地静态图片的路径问题解决方案
1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...
- swing实现QQ登录界面1.0( 实现了同一张图片只加载一次)、(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件)
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...
随机推荐
- 【interview】汉诺塔学递归
https://www.cnblogs.com/yanlingyin/archive/2011/11/14/2247594.html https://www.cnblogs.com/dmego/p/5 ...
- Linux代理搭建TinyProxy
操作系统:阿里云CentOS 7.4 64位 安装方法: yum install tinyproxy 配置: vi /etc/tinyproxy/tinyproxy.conf Port 8888 // ...
- 初学python之路-day08前期总结
# 1# 计算机原理:控制器 运算器 存储器 input设备 output设备 IO流# 三大核心:CPU 内存 硬盘 # 内存分布:栈区 与 堆区# 如二进制与十进制的转换,如1111转成十进制为1 ...
- LR使用web_add_cookie函数进行cookie模拟
1 为什么要使用cookie模拟 从日常项目测试过程中的问题说起.比如要进行论坛中的文件下载功能的测试.我们都知道只有登录用户才能进行下载操作,这样我们的测试过程可能就变成了先登录系统,然后再进 ...
- linux下c通过虚拟地址映射读写文件的代码
在代码过程中中,把开发过程中比较好的一些代码片段记录起来,如下的代码内容是关于 linux下c通过虚拟地址映射读写文件的代码,应该对小伙伴有些好处.#include<stdio.h>#in ...
- 【python】使用flask制作小型页面的关键点总结
目录结构 app.py web代码 store.db 存储信息的轻量数据库,用的sqlite3 schema.sql 数据库的初始化建表语句 settings.cfg 配置信息 static/styl ...
- centos/redhat命令行上传下载文件
前言:客户端上没有安装xftp,winscp等等软件,无法将服务器上需要的文件下载到本地去解析,无法将本地的安装包上传到服务器上去,这个时候命令行就可以带你翱翔一波 配置如下: 服务器上: 1.安装需 ...
- Django by example -----1总结
根据django by example 完成了第一个例子,总结如下. 第一: django的orm真的很方便,避免了sql语句的使用,你所需要的,django基本都已经封装好了,一些字段很有意思. 第 ...
- Javascript 堆栈的模拟
栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新元素放到栈 ...
- 2018-2019网络对抗技术 20165220 Exp4 恶意代码分析
实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件. ...