jQuery图文信息滚动效果

WEB页面需要展示网站最新信息,如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果,我们可以用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,lilist-style-type:none;} 
#conwidth:760pxheight:400pxmargin:30px auto 10px autoposition:relative;  
border:1px #d3d3d3 solidbackground-color:#fffoverflow:hidden;} 
#con ulposition:absolutemargin:10pxtop:0left:0padding:0;} 
#con ul liwidth:100%;  border-bottom:1px #ccc dottedpadding:20px 0overflow:hidden; } 
#con ul li a.facefloat:leftwidth:50pxheight:50pxmargin-top:2pxpadding:2px;} 
#con ul li h4{height:22pxline-height:22pxmargin-left:60px
#con ul li pmargin-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.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。
阅读更多
博主设置当前文章不允许评论。

没有更多推荐了,返回首页