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 相关文章推荐
Javascript学习笔记2 函数
Jan 11 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vue之数据交互实例代码
Jun 20 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Vue实现数据请求拦截
Oct 23 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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者的疑难问答(2)
2006/10/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP实现验证码校验功能
2017/11/16 PHP
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
django输出html内容的实例
2018/05/27 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python logging 日志的级别调整方式
2020/02/21 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
大学生求职推荐信
2013/11/27 职场文书
继电保护工岗位职责
2014/01/05 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
人事专员的岗位职责
2014/03/01 职场文书
专题组织生活会方案
2014/06/15 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android