`

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 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>

    <!-- src不支持相对路径,使用绝对路径 -->

</div>

<script type="text/javascript">

$('#wp_inner').slider({

sliderTime:4000,

coincide:false

});

</script>

 

</body>

</html>


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics