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 相关文章推荐
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
js实现旋转的星空效果
Nov 01 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 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微信支付通知的处理方式
2014/05/25 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php常用字符函数实例小结
2016/12/29 PHP
php实现简单四则运算器
2020/11/29 PHP
jQuery提交多个表单的小例子
2013/06/30 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
计算机专业职业生涯规划范文
2014/01/19 职场文书
新护士岗前培训制度
2014/02/02 职场文书
远程教育学习心得体会
2016/01/23 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript