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获取客户端外网ip的简单实例
Nov 21 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
php链式操作的实现方式分析
2019/08/12 PHP
JS画线(实例代码)
2013/11/20 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
js中split()方法得到的数组长度问题
2018/07/19 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python 性能优化方法小结
2017/03/31 Python
对python 命令的-u参数详解
2018/12/03 Python
python实现随机漫步方法和原理
2019/06/10 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
python编程的核心知识点总结
2021/02/08 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
外企求职信范文分享
2013/12/31 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
好听的队名和口号
2014/06/09 职场文书
房屋过户委托书范本
2014/10/07 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
职工宿舍管理制度
2015/08/05 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL