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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
微信小程序模板template简单用法示例
Dec 04 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
JavaScript提升机制Hoisting详解
Oct 23 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js style动态设置table高度
2014/10/21 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python安装与使用redis的方法
2016/04/19 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python实现日常记账本小程序
2018/03/10 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python在地图上画比例的实例详解
2020/11/13 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014年项目工作总结
2014/11/24 职场文书
六五普法学习心得体会
2016/01/21 职场文书