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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
domReady的实现案例
Nov 23 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
Vue实现图书管理小案例
Dec 03 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代码
2007/03/03 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python中enumerate函数代码解析
2017/10/31 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python 表格打印代码实例解析
2019/10/12 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
应聘自荐信
2013/12/14 职场文书
学生喝酒检讨书
2014/02/06 职场文书
2014年元旦感言
2014/03/06 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
党员民主评议自我评价
2014/10/20 职场文书
员工手册编写范本
2015/05/14 职场文书
通讯稿范文
2015/07/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android