点滴积累【JS】---JS实现动画闪烁效果
效果:
思路:首先获得图片数组,然后做JS定时用setTimeout和setInterval在用显示隐藏实现闪烁效果。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//图片数组
var imgNumber = [];
//20160815添加动画效果
function Init() {
for (var i = 1; i <= 5; i++) {
imgNumber[i] = "image" + i;
}
}
//定时执行
window.setTimeout(aniFun, 1000);
//当前图片序号
var curNumber = 0;
var f = "";
var showOrHide = "";
//动画效果
function aniFun() { //添加图片闪烁效果
showOrHideImage();
window.setTimeout(aniDo, 500);
}
//图片闪烁效果
function showOrHideImage() {
//循环执行
window.setTimeout(hideAllImage, 100);
window.setTimeout(showAllImage, 200);
//循环执行
window.setTimeout(hideAllImage, 300);
window.setTimeout(showAllImage, 400);
}
//执行动画
function aniDo() {
hideAllImage();
curNumber = 0;
//循环执行,
f = window.setInterval(showImage, 500);
}
//隐藏所有图片
function hideAllImage() {
//隐藏所有图片
for (var i = 1; i <= 5; i++) {
if (typeof (document.getElementById(imgNumber[i])) != "undefined") {
document.getElementById(imgNumber[i]).style.display = "none";
}
}
}
//显示所有图片
function showAllImage() {
//显示所有图片
for (var i = 1; i <= 5; i++) {
if (typeof (document.getElementById(imgNumber[i])) != "undefined") {
document.getElementById(imgNumber[i]).style.display = "block";
}
}
}
//显示逐个图片
function showImage() {
curNumber++;
//显示逐个图片
if (curNumber <= 5) {
if (typeof (document.getElementById(imgNumber[curNumber])) != "undefined") {
document.getElementById(imgNumber[curNumber]).style.display = "block";
}
}
else if (curNumber > 6) {
window.clearInterval(f);
aniFun();
}
}
</script>
</head>
<body onload="Init();">
<div style="margin-left: 400px; margin-top: 100px;">
青苹果图片闪烁
<img id="image1" style="display: block" src="Image/111.png" />
<img id="image2" style="display: block" src="Image/222.png" />
<img id="image3" style="display: block" src="Image/333.png" />
<img id="image4" style="display: block" src="Image/444.png" />
<img id="image5" style="display: block" src="Image/555.png" />
</div>
</body>
</html>
Demo下载:
http://files.cnblogs.com/files/xinchun/ShowOrHide.zip
点滴积累【JS】---JS实现动画闪烁效果的更多相关文章
- 点滴积累【JS】---JS实现仿百度模糊搜索效果
效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...
- 点滴积累【JS】---JQuery实现条形统计图,适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
- 点滴积累【JS】---JS小功能(createElement和insertBefore添加div下面的节点)
效果: 代码: <head runat="server"> <title></title> <script type="text ...
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)
效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- 点滴积累【JS】---JS小功能(JS实现动态添加运动属性)
效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...
随机推荐
- PHP:相对于C#,PHP中的个性化语法
背景 今天把PHP的基本语法结构熟悉了一下,包括:变量.类型.常量.运算符.字符串.作用域和函数等,本文列举一些我需要强化记忆的结构(和C#不同). 一些个性化的结构 foreach结构 <?p ...
- Static Nested Class 和 Inner Class的不同?
Nested Class (一般是C++的说法),Inner Class (一般是JAVA的说法).Java内部类与C++嵌套类最大的不同就在于是否有指向外部的引用上. 注: 静态内部类(Inner ...
- Java 反照机制中 getMethod()和getDeclaredField()区别
Java 反射机制中 getMethod()和getDeclaredField()区别 今天在程序中用到java反射机制时,遇到的问题记录一下:我当时遇到的问题是,我用反射getMethod()调用类 ...
- Table里td中的文本过长,设置不换行,随内容同行显示(转载)
当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap 就可以解决排版问题啦 <td style="white ...
- iOS: 字体样式
获取iOS内置所有的字体如下: NSArray *familyNames = [UIFont familyNames]; for( NSString *familyName in familyName ...
- 使用mocha测试
学习了MOCHA官网的示例,将学习成果记录一下.[原文+例子:使用mocha测试] mocha是什么 Mocha是一个跑在node和浏览器上的javascript测试框架,让异步测试变得简单有趣, 并 ...
- 最佳实践扩展Windows窗体DataGridView控件 .net 4.5 附示例代码
Windows窗体DataGridView控件的性能调优.net 4.5 在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你可以避 ...
- Linux shell 提取文件名和目录名
${}用于字符串的读取,提取和替换功能,可以使用${} 提取字符串 1.提取文件名 [root@localhost log]# var=/dir1/dir2/file.txt [root@localh ...
- 使用Jmeter对应用程序进行测试
JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现,最新的版本是1.9.1,大家可以到 http://jakarta.apache.org/jmeter ...
- 使用select处理任意数目个客户的单进程程序
改写http://www.cnblogs.com/nufangrensheng/p/3587962.html中的TCP回射服务器程序,把它重写成使用select来处理任意数目个客户的单进程程序,而不是 ...