<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新消息闪烁提示</title>
</head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.extend({
blinkTitle : {
show : function() {
var step=0, _title = document.getElementById("number").innerHTML;
var timer = setInterval(function() {
step++;
if (step==3) {step=1;};
if (step==1) {
document.getElementById("number").style.color="red";
document.getElementById("number").innerHTML="33"+_title;
};
if (step==2) {
document.getElementById("number").style.color="blue";
document.getElementById("number").innerHTML="22"+_title;
};
}, 500);
return [timer, _title];
},
clear : function(timerArr) { //去除闪烁提示,恢复初始title文本
if(timerArr) {
clearInterval(timerArr[0]);
//document.getElementById("number").innerHTML = timerArr[1];
};
}
}
});
})(jQuery);
jQuery(function($) {
var timerArr = $.blinkTitle.show();
setTimeout(function() {
$.blinkTitle.clear(timerArr);
}, 5000);
});
</script>
<script type="text/javascript">
function show(){
var obj = document.getElementById("sn");
if(obj.style.display=="block"){
obj.style.display ="none";
}else{
obj.style.display ="block";
}
}
//********************//
$(document).ready(function () {
$("#close_btn").click(function () {
$("#pop_msg").hide();
});
$("#pop_btn").click(function () {
$("#pop_msg").show();
})
})
//********************//
</script>
<body>
<p id="shan" style="text-align:center;" title="这是一个实验颜色的tilte">您有 <em id="number"></em> 条新消息</p>
<br/>
<p style="text-align:center;"><input type="button" value="请单击" οnclick="show()"/></p>
<br/>
<p style="text-align:center;"><input type="button" id="twinkle" value="测试闪烁效果"/></p>
<div id="sn" style="text-align:center;">
试试效果
</div>
</body>
</html>
效果图