jQuery实现的向下推送图文信息滚动效果
HTML
我们以新浪微博信息滚动为背景,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; padding: 0px; color: green;">#fff; overflow:hidden;}
#con ul{ position:absolute; margin:10px; top:; left:; padding:;}
#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秒内容将从上部淡入,完成内容滚动效果。
补充
1.关于图片自动圆角处理,我们可以使用jquery.corner.js这个插件,使用灵活,兼容各浏览器,这个插件下载包里已经为您准备好了。当然你也可以使用css3来控制圆角。
jQuery实现的向下推送图文信息滚动效果的更多相关文章
- JS魔法堂:通过marquee标签实现信息滚动效果
一.前言 有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
- js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
- Javascript实现信息滚动效果的方法
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- wangEditor编辑器中解析html图文信息问题
在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了. 其次,我们是需要在页 ...
- 微信公共平台开发-(.net实现)4--发送图文消息
之前说了让微信发送给关注我们的粉丝普通的文本信息,下面我们来看看如何发送图文信息,需要注意的是这里说的是,让微信发给我们,而不是我们拍个图片发给微信处理,上传图片在以后的再讲.下面是发送图文消息的函数 ...
- 微信公共服务平台开发(.Net 的实现)7-------发送图文消息
之前我们讲过让微信发送给我们普通的文本信息,下面我们来看看如何发送图文信息,需要注意的是这里说的是,让微信发给我们,而不是我们拍个图片发给微信处理,我们上传图片在以后的章节介绍.下面是发送图文消息的函 ...
随机推荐
- Eclipse构建Activiti项目,类导入提示功能不能使用
Eclipse新建一个新的Activiti项目(Activiti项目默认使用Maven管理项目),接着配置好pom.xml添加需要的jar包依赖,引入依赖之后发现在测试类中没有提示导入所需要的包的选项 ...
- bzoj1053
不难发现,要让约数尽可能多,那么素因子越小的的指数一定越大可能的素因数的种类也不超过10种然后直接暴搜即可 ..] ,,,,,,,,,); var n,ant,ans:int64; procedure ...
- Linux驱动的两种加载方式过程分析
一.概念简述 在Linux下可以通过两种方式加载驱动程序:静态加载和动态加载. 静态加载就是把驱动程序直接编译进内核,系统启动后可以直接调用.静态加载的缺点是调试起来比较麻烦,每次修改一个地方都要重新 ...
- unity3d AI's sight
just finished -----by wolf96
- 折腾iPhone的生活——越狱
这次我也加入了越狱大军,也不是为的什么免费软件,只是遵从我玩机的本质,既然想要玩透这个机子,当然要所有都试过来,就果断越狱了,关于越狱的好处和坏处,我会在另外一篇博客里阐述,这篇博客主要就说怎么样进行 ...
- MT9M021/MT9M031总结
MT9M021/MT9m031在低光照度下和捕捉移动场景有非常优异的表现,属于近红外摄像头, S1: Aptina's MT9M021/MT9M031 sensor is capable of a m ...
- CPP数组
数组为函数参数,求出一组数中的最大者;
- 最详细的JavaScript和事件解读
与浏览器进行交互的时候浏览器就会触发各种事件.比如当我们打开某一个网页的时候,浏览器加载完成了这个网页,就会触发一个 load 事件:当我们点击页面中的某一个“地方”,浏览器就会在那个“地方”触发一个 ...
- java代码实现对excel加密、解密(设置或去除打开密码)
使用jxcell组件来完成对excel加密.解密的功能. jxcell.jar[点击下载](此jar没有使用限制,你懂得) 具体代码如下: import java.io.IOException; im ...
- uva1393 Highways
留坑(p.339) 已填(膜汪) 每条直线至少经过两个点,我们不妨在经过的所有点中的第二个点统计它 设f[i][j]表示i * j的答案,那么显然可以用f[i][j] = f[i - 1][j] + ...