jQuery实现单行文字间歇向上滚动源代码


Posted in Javascript onJune 02, 2013

使用jQuery实现单行文字间歇向上滚动

效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm
本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果

以下是源代码:

<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<style type="text/css"> 
.scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */} 
.scrollDiv li{height:25px;padding-left:10px;} 
ul,li{list-style-type:none;margin:0px;}</style> <h2>jquery特效 单行文字向上滚动(有间歇)</h2> 
<div id="scrollDiv_keleyi_com" class="scrollDiv"> 
<ul> 
<li><a href="http://www.keleyi.com/a/bjac/5d7f4ac2efa72d30.htm">菜单滚动至顶部后固定</a></li> 
<li><a href="http://www.keleyi.com/a/bjac/141932b419e08101.htm">jquery使用ColorBox弹出图片组浏览层</a></li> 
<li><a href="http://www.keleyi.com/dev/fd9291320daf9360.htm">jquery右下角滑动弹出可关闭重现层</a></li> 
<li><a href="http://www.keleyi.com/a/bjac/bf0eb8c02085b10d.htm">jquery清空textarea等输入框</a></li> 
</ul> 
</div> 
<script type="text/javascript"> 
function AutoScroll(obj){ 
$(obj).find("ul:first").animate({ 
marginTop:"-25px" 
},500,function(){ 
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
}); 
} 
$(document).ready(function(){ 
setInterval('AutoScroll("#scrollDiv_keleyi_com")',3000); 
}); 
</script>

解析:使用$('li')将匹配到的是多个li元素的集合。
如果要指定获取第一个li元素,那么可以使用“:first”,即$('li:first');
Javascript 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jquery获取节点名称
Apr 26 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jQuery的position()方法详解
Jul 19 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 #Javascript
js怎么终止程序return不行换jfslk
May 30 #Javascript
You might like
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
javascript各种复制代码收集
2008/09/20 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python中format函数如何使用
2020/06/22 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python 实现汉诺塔游戏
2020/11/28 Python
python 装饰器的基本使用
2021/01/13 Python
如何删除一个表里面的重复行
2013/07/13 面试题
政府采购方案
2014/06/12 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
公务员检讨书
2014/11/01 职场文书
对学校的意见和建议
2015/06/04 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python