Jquery 仿新浪首页信息滚动效果1
?
<!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>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.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 style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp_shade.png', sizingMethod='scale');_background-image:none;"></div>
? ? <!-- src不支持相对路径，使用绝对路径 -->
</div>
<script type="text/javascript">
$('#wp_inner').slider({
sliderTime:4000,
coincide:false
});
</script>
?
</body>
</html>
