`

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>


分享到：
| PHP格式化时间
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery仿新浪微博大厅滚动效果v2.0

    【jQuery仿新浪微博大厅滚动效果v2.0】是一款基于JavaScript库jQuery实现的动态滚动效果，旨在模拟新浪微博大厅的信息流更新模式。这个效果的核心在于利用jQuery的动画功能和特定的插件来实现信息的平滑滚动，使用户...

    js特效脚本含源码和说明jQuery仿新浪微博大厅滚动效果v2.0

    js特效脚本含源码和说明jQuery仿新浪微博大厅滚动效果v2.0本资源系百度网盘分享地址

    jQuery仿新浪微博首页滚动留言板插件

    关于【jQuery仿新浪微博首页滚动留言板插件】，这是一个基于jQuery的动态效果插件，它的设计灵感来源于新浪微博的首页。在微博平台上，用户发布的消息会以滚动的形式不间断地展示，这种设计既节省了页面空间，又为...

    jQuery仿新浪微博高度自适应滚动代码.zip

    《jQuery仿新浪微博高度自适应滚动代码详解》 在网页开发中，动态的、高度自适应的滚动效果常常能提升用户体验，使页面更具吸引力。"jQuery仿新浪微博高度自适应滚动代码"便是实现这一效果的一种解决方案。它以其...

    jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622

    【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...

    jQuery完美仿新浪微博大厅无缝滚动效果v2.0 新版

    jQuery完美仿新浪微博大厅无缝滚动效果 v2.0 新版 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载，由于jQuery本身动画无法暂停，故采用第三方重写动画...

    jquery仿新浪微博动态显示

    【jQuery仿新浪微博动态显示】 在Web开发中，模拟社交媒体如新浪微博的动态加载效果是一项常见的需求。这涉及到前端JavaScript库jQuery的高效使用，以及Ajax技术来实现数据的异步加载。以下我们将深入探讨如何使用...

    jquery高仿新浪微博图片显示插件

    《jQuery高仿新浪微博图片显示插件深度解析》 在网页设计和开发中，图片的展示方式对于用户体验至关重要。尤其在社交媒体平台，如新浪微博，图片的加载速度和展示效果直接影响到用户的浏览体验。为了满足此类需求，...

    jQuery完美仿新浪微博大厅无缝滚动效果 20121106新版

    jQuery完美仿新浪微博大厅无缝滚动效果 20121106新版 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载，由于jQuery本身动画无法暂停，故采用第三方重写...

    jquery实现仿新浪微博评论滚动效果

    主要介绍了jquery实现仿新浪微博评论滚动效果,基于jquery实现页面图文定时滚动效果,涉及jquery页面元素的遍历与样式的动态操作技巧,是一款经典的jquery滚动特效,非常具有实用价值,需要的朋友可以参考下

    jquery新浪微博图文列表滚动切换效果代码

    "jQuery 微博图文列表滚动切换效果"是常见的一种网页交互设计，它模拟了类似新浪微博的展示方式，通过滚动页面时，列表中的图片和文字内容自动平滑切换，为用户呈现丰富的信息流体验。 一、jQuery库的介绍 jQuery ...

    jQuery仿新浪微博大厅滚动效果特效代码

    【jQuery仿新浪微博大厅滚动效果特效代码】是一种在网页中实现类似新浪微博信息流滚动展示的技术，主要依赖于JavaScript库jQuery的高效处理能力和CSS样式来完成动态视觉效果。这种效果可以让网站的最新信息持续滚动...

    完美仿新浪微博大厅动态向下滚动jQuery版，淡入浅出效果

    仿新浪微博大厅动态向下滚动jQuery版，淡入浅出效果 注意：请使用最新的jquery包，否则可能在非IE浏览器下出现显示BUG，最新版可到Jquery官网 www.jquery.com下载

    jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动

    标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...

Magicbox
Global site tag (gtag.js) - Google Analytics