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中attr和prop的区别分析
Mar 16 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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 魔术方法使用说明
2009/10/20 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
JavaScript中的事件处理
2008/01/16 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
jquery中this的使用说明
2010/09/06 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
nodejs基础知识
2017/02/03 NodeJs
JS判断微信扫码的方法
2017/08/07 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python 解压pkl文件的方法
2018/10/25 Python
python实现三次样条插值
2018/12/17 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
django使用channels实现通信的示例
2020/10/19 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
入党自荐书范文
2014/03/09 职场文书
店铺转让协议书
2014/12/02 职场文书
课改心得体会范文
2016/01/25 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS