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加解密 脚本解密
Feb 22 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
在vue组件中使用axios的方法
Mar 16 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
springboot+vue实现文件上传下载
Nov 17 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
构建简单的Webmail系统
2006/10/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
python简单猜数游戏实例
2015/07/09 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
对python函数签名的方法详解
2019/01/22 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python图形用户接口实例详解
2019/12/16 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
渡河少年教学反思
2014/02/12 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
万里长城导游词
2015/01/30 职场文书
演讲比赛主持词
2015/06/29 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python