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 性能优化指南(3)
May 21 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
JS如何把字符串转换成json
Feb 21 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 UTF8中文字符截断函数代码
2012/09/11 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python类和继承用法实例
2015/07/07 Python
django文档学习之applications使用详解
2018/01/29 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python File(文件) 方法整理
2019/02/18 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
python中实现栈的三种方法
2020/12/19 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
灵泰克Java笔试题
2016/01/09 面试题
中职生自我鉴定范文
2013/10/03 职场文书
公务员的自我鉴定
2013/10/26 职场文书
上课打牌的检讨书
2014/02/15 职场文书
商务英语专业求职信
2014/06/26 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python