jquery文本闪烁
2015-12-02 15:27
721 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jquery文字闪烁</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{magin:0;padding: 0;} body { font-family: Arial,Helvetica,sans-serif; background: #f9f9f9; font-size: 14px; color: #333; } .main { width: 600px; background: #fff; margin: 0 auto; padding: 20px 0; border: solid #ddd; border-width: 0 1px; min-height: 800px; } .cssFlash { width: 240px; height: 26px; line-height: 26px; background: #f0f0f0; border: 1px solid #ddd; text-align: center; font-size: 14px; margin: 20px auto; } input.cssFlash { width: 240px; font-weight: 900; color: #999; display: block; background: #fff; text-align: left; } .red { border: 1px solid #d00; background: #ffe9e8; color: #d00; } input.red { background: #ffe9e8; } #id-div-clickFlash {cursor: pointer;} .des { margin: 0 20px; padding: 6px; line-height: 20px; border: 1px solid #ccc; color: #555; } </style> </head> <body> <div class="main"> <div id="id-div-autoFlash" class="cssFlash">文本自动闪动</div> </div> <script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script> <script> $(function(){ function textFlash(obj,cssName,times){ var i=0,t=false,o=obj.attr("class")+" ",c="",times=times||2; if(t) return; t=setInterval(function(){ i++; c=i%2?o+cssName:o; //给偶数次添加两个样式,给奇数次添加一个样式 //alert("c=="+c); obj.attr("class",c); if(i==2*times){ clearInterval(t); obj.removeClass(cssName); } },200); }; textFlash($("#id-div-autoFlash"),"red",3); }); </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作