jQuery实现的向下推送图文信息滚动效果

原创文章 作者:月光光 2013年07月06日 11:52helloweba.com 标签:jQuery  滑动 

WEB页面需要展示网站最新信息,如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。

jQuery实现的向下推送图文信息滚动效果

HTML

我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下:

<div id="con">
  	<ul>
    	<li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/
50/1290146312/1" /></a>
           	<h4><a href="#">李开复</a></h4>
        	<p>【领导力的四个境界】境界一:员工因为你的职位而服从你;境界二:员工因为你的能力而服从你;
境界三:员工因为你的培养而服从你,他们感恩于你对他们的尊重、培养和付出;
境界四:员工因为你的为人、魅力、风范、价值观而拥戴你。(转)</p>
    	</li>
        ...更多内容...
    </ul>
</div>

CSS

我们用CSS来美化页面布局,以下是数据滚动区的CSS代码,当然大家可以修改css定制不同的外观效果。

ul,li{ list-style-type:none;}
#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative; 
border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;}
#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}
#con ul li{ width:100%;  border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; }
#con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;}
#con ul li h4{height:22px; line-height:22px; margin-left:60px}
#con ul li p{ margin-left:60px;line-height:22px; }

jQuery

原理:我们定义一个滚动函数scrtime(),当鼠标滑向滚动区域时,停止滚动(即清除scrtime),当鼠标离开时继续滚动,滚动scrtime()的过程中,让最后的li元素定时插入第一个li元素的上方,采用animate方法来改变li的高度和透明效果,实现动画加载效果,然后定时每隔3秒钟执行一次滚动。

$(function(){
    var scrtime;
    $("#con").hover(function(){
         clearInterval(scrtime);//停止滚动
    },function(){
        scrtime = setInterval(function(){
            	var ul = $("#con ul");
                var liHeight = ul.find("li:last").height();//计算最后一个li元素的高度
                ul.animate({marginTop : liHeight+40 +"px"},1000,function(){
                	ul.find("li:last").prependTo(ul)
                	ul.find("li:first").hide();
                	ul.css({marginTop:0});
                	ul.find("li:first").fadeIn(1000);
                });        
        },3000);
     }).trigger("mouseleave");
});

以上代码实现了一个内容持续向下滚动的效果,每隔3秒内容将从上部淡入,完成内容滚动效果。

补充

1.关于图片自动圆角处理,我们可以使用jquery.corner.js这个插件,使用灵活,兼容各浏览器,这个插件下载包里已经为您准备好了。当然你也可以使用css3来控制圆角。

2.本站有很多介绍关于前端滚动效果的文章,如果您感兴趣可以点击滚动效果

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/223.html

13条评论

  • 下载了不行啊

  • IE6有点问题,下面超出容器

  • 休闲吧云点播,看片神器!!带资源搜索! 在这里看:vod.xiux8.com ; FnJJ[威武]

  • 很感谢,但是可以往上滑动吗?要改那里?

  • 来回复一个伟大的站长,你是我见过最用心最细心最有耐心而无私奉献默默无闻的人,你默默的做这样的事,我看你一篇文章我都很感动,感谢世界有你,感谢你在中国。 我的***:467477957 我们成为好朋友吧!

  • 支持站长 辛苦了 学到了很多 太多无私分享[泪]

  • [推荐]

  • 一直很关注!

  • 其实 这样的平台 存在于一个网站中的“文章”版块 感觉有点夹缝中求生存。贵站完全可以做成一个二级站点嘛~

  • 来回复一个伟大的站长,你是我见过最用心最细心最有耐心而无私奉献默默无闻的人,你默默的做这样的事,我看你一篇文章我都很感动,感谢世界有你,感谢你在中国。[爱你]

  • [挤眼] 很不错,评论使用多说插件了,呵呵!

  • 很好,一直关注你的文章

  • 解释很详细 ,持续关注你