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


Posted in Javascript onMay 03, 2015

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来控制圆角。

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

Javascript 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 #Javascript
JQuery页面地址处理插件jqURL详解
May 03 #Javascript
jQuery的animate函数实现图文切换动画效果
May 03 #Javascript
php+ajax+jquery实现点击加载更多内容
May 03 #Javascript
jquery插件hiAlert实现网页对话框美化
May 03 #Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
You might like
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JavaScript获取select中text值的方法
2017/02/13 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
numpy中矩阵合并的实例
2018/06/15 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python函数参数操作详解
2018/08/03 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
实习生自我鉴定
2013/12/12 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
高中军训感想
2015/08/07 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
小学运动会入场口号
2015/12/24 职场文书