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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
PHP4引用文件语句的对比
2006/10/09 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
xmlHTTP实例
2006/10/24 Javascript
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
js href的用法
2010/05/13 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
python中私有函数调用方法解密
2016/04/29 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python多分支if语句的使用
2020/09/03 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
印度低票价航空公司:GoAir
2017/10/11 全球购物
学雷锋日活动总结
2015/02/06 职场文书
研究生导师推荐信
2015/03/25 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
南京南京观后感
2015/06/02 职场文书