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 相关文章推荐
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
js实现中文实时时钟
Jan 15 Javascript
详解Vite的新体验
Feb 22 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 set_time_limit()函数的使用详解
2013/06/05 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python 调用Java实例详解
2017/06/02 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python绘制简单彩虹图
2018/11/19 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
毕业生实习鉴定
2013/12/11 职场文书
会员活动策划方案
2014/08/19 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers