jQuery 制作交通信号灯红绿灯动画效果

HTML

 <p>好好学习 天天向上</p><div class="light"><div class="red"></div><div class="yellow"></div><div class="green"></div></div>

CSS

 * {box-sizing: border-box;}p {text-align: center;}.light {width: 103px;height: 303px;background-color: #000;margin-left: 600px; margin-top: 30px;}.light div {position: relative;}.red {width: 100px;height: 100px;border-radius: 50%;background: red;}.yellow {width: 100px;height: 100px;border-radius: 50%;background: yellow;display: none;position: absolute;top: 100px;}.green {width: 100px;height: 100px;border-radius: 50%;background: green;display: none;position: absolute;top: 200px;}

JS：

 $(function(){index = 0;function red() {//定时器每隔三秒换一个颜色setInterval(function(){index++;if(index>3){//当第三个灯亮完之后，再从第一个红灯开始。index = 0;}$('.light div:eq(' + index + ')').css('display', 'block').siblings().css('display', 'none');}, 3000);}red();})

效果演示：

jQuery 制作交通信号灯红绿灯动画效果相关推荐

纯CSS3 制作交通信号灯红绿灯动画效果
纯CSS3 制作交通信号灯红绿灯动画效果 HTML: <div class="light"><div class="red"></ ...
JQuery制作飘落的树叶动画效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
使用 CSS3 jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
html实现光碟转动效果,flash脚本roll应用制作转动的光碟动画效果
这次我们利用roll语句制作:鼠标经过时光碟转动,并播放歌曲的动画.包括光碟的制作,滤镜的使用,音乐的插入,属性色彩的调整,以及roll脚本的应用.GIF图片有些失真,只看动画效果即可. 一.制作光碟 ...
基于VB算法+Picture+Timer控件制作的39种动画效果,类似屏保（完整原程序）
基于VB算法+Picture+Timer控件制作的39种动画效果,类似屏保(完整原程序) 动画播放器程序,在WIN2003调试通过,详细请自行下载进行学习测试,程序大小13K 下载地址:http:// ...
3dmax：3dmax经典案例详细步骤图文教程之粒子阵列粒子系统制作星球爆炸特效动画效果
3dmax:3dmax经典案例详细步骤图文教程之粒子阵列粒子系统制作星球爆炸特效动画效果目录 3dmax经典案例详细步骤图文教程之粒子阵列粒子系统制作星球爆炸特效动画效果
android 倒水动画,MAYA粒子制作逼真的倒水动画效果
这篇教程教脚本之家的MAYA FANS们用MAYA粒子制作倒水动画,教程属于基础的MAYA粒子模块教程.难度一般.转发过来和脚本之家的朋友们一起分享.希望脚本之家的朋友们喜欢这篇教程.先来看看最终的效 ...

jQuery 制作交通信号灯红绿灯动画效果

jQuery 制作交通信号灯红绿灯动画效果

jQuery 制作交通信号灯红绿灯动画效果相关推荐

最新文章

热门文章