您的位置：首页 > Web前端 > JavaScript

js文字闪烁效果

2016-06-23 09:31 447 查看

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 文字显示</title>
</head>
<style>
.table-list-warp .tab-all tbody td {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #666666;
color: #333333;
padding: 4px;
text-align: center;
vertical-align: middle;
}
</style>
<script src="${ctxStatic}/qt/js/jquery.1.7.2.min.js"></script>
<body>
<div class="table-list-warp">
<table class="tab-all">
<tbody>
<tr>
<td><a id="step_6_2_1_but" href="javascript:void(0);" class="ai_m py_b" style="font-size: 18px;">jquery 文字闪烁显示</a></td>
</tr>
</tbody>
</table>
</div>
<script>
$(function(){
function init(){
$('#step_6_2_1_but').trigger("mouseenter");
}
var colors = ["#0000FF","#FF1493","#228B22","#FFFF00"];
var colorsLength = colors.length;
var aimRun = function( aim ){
if ( aim == null ){
clearInterval( aimInterval );
return;
}

var idx = 0;
var o = false;
aimInterval = setInterval(function(){
aim.css({color:colors[idx]});
o = o ? !(--idx < 1): ++idx + 1 > colorsLength  ;
},100);
};

$(".ai_m").on("mouseenter", function(){
aimRun($(this));
});

init();
});

</script>
</body>
</html>

转自：http://blog.csdn.net/wangxinqiang1129/article/details/8767238

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航