jquery——警示灯特效
2019-10-25 12:09
2306 查看
GFT动态效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.js"></script> <style> .blue{ height: 50px; width: 40px; background-color: blue; border-radius: 20px 20px 2px 2px; } .red{ height: 50px; width: 40px; background-color: red; border-radius: 20px 20px 2px 2px; } </style> </head> <body> <div class="blue"></div><br/> <input type="button" id="close" value="关闭" /> <input type="button" id="open" value="打开" /> <script type="text/javascript"> //定义定时器对象 var interval; //打开定时器 function open(){ if(interval != undefined){ alert("已经启动!"); }else{ interval = setInterval(function(){ $("div").toggleClass("red"); },100); } } //关闭定时器 function close(){ clearInterval(interval); interval = undefined; } $(function(){ //关闭按钮绑定点击事件 $("#close").click(function(){ close(); }); //打开按钮绑定点击事件 $("#open").click(function(){ open(); }); }); </script> </body> </html>
相关文章推荐
- 实用jQuery分页特效插件jquery.pagination.js
- 【前端】jQuery实现锚点向下平滑滚动特效
- 18款js和jquery文字特效代码分享
- jquery 插件之 点赞“+1” 特效
- jQuery 实现图片的特效1[原]
- JS正则表达式应用——基于Jquery的验证密码强度特效
- 基于jQuery实现 图片飞入购物车特效
- jquery京东商城双11焦点图多图广告特效代码分享
- jQuery插件Font effect实现Javascript文字特效
- jquery动态增加删减表格行特效
- jquery特效-全屏楼梯式滚动
- jQuery 切换特效/动画效果
- 10个款优秀的jquery图片特效插件推荐 值得分享
- jquery动态回到顶部特效
- Jquery 各种特效
- jquery插件orbit.js实现图片折叠轮换特效
- jquery带有索引按钮且自动轮播切换特效代码分享
- 15个web前端的美轮美奂的 jQuery 图片特效
- 【特效】jquery选项卡插件,页面多个选项卡统一调用
- jQuery带进度条全屏图片轮播特效代码分享