当QQ 好友有消息时,头像是跳动,我想实现这个小功能。
以下是代码,要注意的是 div 的 position 要是 absolute 或 relative
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>跳动</title>
<style type="text/css" media="screen">
#id1,#id2,#id3 {width:200px; height:100px; background-color:#E5E5E5; margin:20px; position:relative;}
</style>
</head>
<body>
<div id="id1">
hello, div 1
</div>
<div id="id2">
hello, div 2
</div>
<div id="id3">
hello, div 3
</div>
<script type="text/javascript" charset="utf-8">
var $ = function (name) { return document.getElementById(name) } ;
function icon_jump (elem,color) {
var i = 0;
function jump (elem,i) {
var offset = (i % 2 ==0 ) ? -1 : 1;
elem.style.top = elem.clientTop + offset;
}
function flash(elem,i) {
var color = (i % 2 ==0 ) ? 'white': '#E5E5E5';
elem.style.background = color;
}
setInterval (function () {
jump (elem, i);
if ( color==1 )
flash (elem,i);
i++;
}, 300);
}
icon_jump ($('id1'),0);
icon_jump ($('id2'),1);
</script>
</body>
</html>