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 相关文章推荐
js图片自动切换效果处理代码
May 07 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
微信小程序实现九宫格抽奖
Apr 15 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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 foreach 参数强制类型转换的问题
2010/12/10 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php经典算法集锦
2015/11/14 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python的命名规则知识点总结
2019/10/04 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python中无限循环需要什么条件
2020/05/27 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
几个SQL的面试题
2014/03/08 面试题
linux面试题参考答案(8)
2015/08/11 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
条幅标语大全
2014/06/20 职场文书
单位活动策划方案
2014/08/17 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
党员年度个人总结
2015/02/14 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers