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 相关文章推荐
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 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
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Yii框架安装简明教程
2020/05/15 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
js 操作符汇总
2014/11/08 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python self用法详解
2020/11/28 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
团队经理竞聘书
2014/03/31 职场文书
运动会演讲稿300字
2014/08/25 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
宿舍管理制度范本
2015/08/07 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python