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

 更新时间:2015年05月03日 17:56:59   投稿:hebedich  
jquery实现的图文滚动效果,图文内容经过指定的间隔时间自动向下滚动显示,效果非常酷。有需要的小伙伴可以参考下。

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

我们以新浪微博信息滚动为背景,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秒内容将从上部淡入,完成内容滚动效果。

补充

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • 基于jquery的DIV随滚动条滚动而滚动的代码

    基于jquery的DIV随滚动条滚动而滚动的代码

    基于jquery的DIV随滚动条滚动而滚动的代码,有了JQuery简单多了,就几行代码搞定
    2012-07-07
  • jQuery增加自定义函数的方法

    jQuery增加自定义函数的方法

    这篇文章主要介绍了jQuery增加自定义函数的方法,通过简单的样式添加为例分析了jquery增加自定义函数的实现技巧,非常简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 省市区三级联动jquery实现代码

    省市区三级联动jquery实现代码

    这篇文章主要为大家详细绍了省市区三级联动jquery实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery实现弹出窗口中切换登录与注册表单

    jQuery实现弹出窗口中切换登录与注册表单

    本文给大家推荐的是一款jQuery实现弹出窗口中切换登录与注册表单的特效。适用浏览器:IE8+、FireFox、Chrome、Safari、Opera。十分的方便实用,有需要的小伙伴可以参考下。
    2015-06-06
  • 读jQuery之五(取DOM元素)

    读jQuery之五(取DOM元素)

    使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。
    2011-06-06
  • jQuery的实现原理的模拟代码 -1 核心部分

    jQuery的实现原理的模拟代码 -1 核心部分

    最近又看了一下 jQuery 1.4.2, 为了便于理解,将 jQuery 的核心使用比较简单的代码模拟一下。方便学习。
    2010-08-08
  • 用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    今天要说的是用jquery的语法和组件dialog及Autocomplete来制作QQ邮箱的发件人操作功能,认为这个太过简单的可以离开了。
    2011-01-01
  • jquery实现选中单选按钮下拉伸缩效果

    jquery实现选中单选按钮下拉伸缩效果

    这篇文章主要介绍了jquery实现选中单选按钮下拉伸缩效果的方法,涉及jquery鼠标事件及页面元素样式的动态操作技巧,该功能可用于动态显示特定内容(如发票打印等),需要的朋友可以参考下
    2015-08-08
  • jQuery实现长文字部分显示代码

    jQuery实现长文字部分显示代码

    在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示,有类似需求的朋友可以参考下哈,希望对你有所帮助
    2013-05-05
  • jQuery类选择器用法实例

    jQuery类选择器用法实例

    这篇文章主要介绍了jQuery类选择器用法,以一个隐藏div元素的实例分析了jQuery类选择器的用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12

最新评论