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-------发送图文消息
之前我们讲过让微信发送给我们普通的文本信息,下面我们来看看如何发送图文信息,需要注意的是这里说的是,让微信发给我们,而不是我们拍个图片发给微信处理,我们上传图片在以后的章节介绍.下面是发送图文消息的函 ...
随机推荐
- 【HDOJ】3789 奥运排序问题
写了个函数指针,这题目很水,但是佷烦. #include <iostream> #include <cstring> #include <cstdio> #incl ...
- Linux Kernel空指针引用本地拒绝服务漏洞(CVE-2013-5634)
漏洞版本: Linux kernel 漏洞描述: BUGTRAQ ID: 61995 CVE(CAN) ID: CVE-2013-5634 Linux Kernel是Linux操作系统的内核. 适用于 ...
- 【VirtualDOM】
前沿技术解密——VirtualDOM miniflycn/qvd Matt-Esch/virtual-dom Facebook React 和 Web Components(Polymer)对比优势和 ...
- (转载)浅谈javascript的分号
(转载)http://www.blueidea.com/tech/web/2009/7261.asp javascript的分号代表语句的结束符,但由于javascript具有分号自动插入规则,所以它 ...
- JS、C#编码解码
escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@ ...
- php 错误信息配置
display_errors = on/off错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. ...
- 4种字符串匹配算法:BS朴素 Rabin-karp(上)
字符串的匹配的算法一直都是比较基础的算法,我们本科数据结构就学过了严蔚敏的KMP算法.KMP算法应该是最高效的一种算法,但是确实稍微有点难理解.所以打算,开这个博客,一步步的介绍4种匹配的算法.也是& ...
- poj 2425 A Chess Game(SG函数)
A Chess Game Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 3551 Accepted: 1440 Desc ...
- iOS动态管理AutoLayout的约束NSLayoutConstraint
除了使用Storyboard之外,也可以使用使用代码的方式,动态的向指定的UIView,添加约束. 例如有两个UILabel:someLabel,otherLabel 首先用代码实例化,两个控件 se ...
- ACM1019_最大公倍数
/*问题说明 一组正整数的最小公倍数(LCM)是最小的正整数约数集合中的所有号码. 例如,5,7和15的最小公倍数是105. 输入 输入将包括多个问题的实例.输入的第一行中,将包含一个整数, 表示问题 ...