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添加重载函数的辅助方法
Jul 04 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
js实现简单扫雷
Nov 27 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
文本加密解密
2006/06/23 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python selenium循环登陆网站的实现
2019/11/04 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
Python的collections模块真的很好用
2021/03/01 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
DTD的含义以及作用
2014/01/26 面试题
网络编辑岗位职责
2014/03/18 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
政协调研汇报材料
2014/08/15 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
优秀教师事迹材料
2014/12/15 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python