点击(此处)折叠或打开

<!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>
<title>tweets-slide</title>
<script type=\"text/javascript\" src=\"http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js\"></script>
<style type=\"text/css\" _mce_bogus=\"1\">
<!--
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5 tahoma, arial, \\5b8b\\4f53; color:#666; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
body{background-color:#ECF5FF;}
#wp{width:500px; height:400px; overflow:hidden; margin:20px auto; border:1px solid #333; background-color:#fff; position:relative;}
.wp_con{padding:10px; border-bottom:1px dashed #333; background-color:#fff;}
.wp_shade{background:url(wp_shade.png) 0 0 no-repeat; width:500px; height:45px; position:absolute; left:0; bottom:-1px; overflow:hidden;}
-->
</style>
<script type=\"text/javascript\">
(function(a) {
a.fn.slider = function(d) {
var g = {
sliderTime: 3000,
sliderEffect: \"shovedOff\", // sliderEffect每次变化的函数
coincide: true, // 控制先变化height后变化opacity的效果，false时类似于微博效果
mousePause: true, // 鼠标控制暂停与播放的事件，true时增加鼠标事件
itemFlag: \"\" // 增加HTML子类的附加属性，直接定义即可
};
var i = 0;
var b = a.extend(g, d);
var f = b.sliderTime;
var h = a(this);
if (b.mousePause) {
h.bind(\"mouseleave\",
function() {
clearTimeout(i);
i = setInterval(function() {
c[b.sliderEffect]()
},
f)
});
h.bind(\"mouseenter\",
function() {
clearTimeout(i)
})
}
var e = function() {
$s_first_child = h.find(\".\" + b.itemFlag + \":first-child\");
$s_last_child = h.find(\".\" + b.itemFlag + \":last-child\");
firstH = $s_first_child.height();
lastH = $s_last_child.height();
};
var c = {
shovedOff: function() {
e();
$s_last_child.css({
opacity: 0,
height: 0
}).prependTo(h);
if (!b.coincide) {
$s_last_child.animate({
height: lastH
},
800,
function() {
a(this).animate({
opacity: 1
},
600)
})
} else {
$s_last_child.css({
opacity: 1
}).animate({
height: lastH
},
1200)
}
}
};
i = setInterval(function() {
c[b.sliderEffect]()
},
f)
}
})(jQuery);
</script>
</head>
<body>
<div id=\"wp\">
<div id=\"wp_inner\">
<div class=\"wp_con\">
NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!NO.1 test!
</div>
<div class=\"wp_con\">
NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!NO.2 test!
</div>
<div class=\"wp_con\">
NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!NO.3 test!
</div>
<div class=\"wp_con\">
NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!NO.4 test!
</div>
<div class=\"wp_con\">
NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!NO.5 test!
</div>
<div class=\"wp_con\">
NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!NO.6 test!
</div>
<div class=\"wp_con\">
NO.7 test!NO.7 test!NO.7 test!NO.7 test!NO.7 test!NO.7 test!NO.7 test!
</div>
<div class=\"wp_con\">
NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!NO.8 test!
</div>
<div class=\"wp_con\">
NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!NO.9 test!
</div>
<div class=\"wp_con\">
NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!NO.10 test!
</div>
</div>
<div class=\"wp_shade\" style=\"_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'wp_shade.png\', sizingMethod=\'scale\');_background-image:none;\"></div>
</div>
<script type=\"text/javascript\">
$(\'#wp_inner\').slider({
sliderTime:4000,
coincide:false
});
</script>
</body>
</html>

ITPub博客

jQeury动态文字信息滚动，类似新浪微博

最新文章