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 添加/移除CSS类实现代码
Feb 11 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 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
网络资源
2006/10/09 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
js get和post请求实现代码解析
2020/02/06 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python 字典中的所有方法及用法
2020/06/10 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
安全环保标语
2014/06/09 职场文书
公司门卫工作职责
2014/06/28 职场文书
寒假安全保证书
2015/02/28 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
会计主管岗位职责
2015/04/02 职场文书
百万英镑观后感
2015/06/09 职场文书
聘任书范文大全
2015/09/21 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书