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 select(列表)的操作(取值/赋值)
Mar 16 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
Jquery 效果使用详解
Nov 23 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php防盗链的常用方法小结
2010/07/02 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
使用npy转image图像并保存的实例
2020/07/01 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
五年级英语教学反思
2014/01/31 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
应届毕业生自荐书
2014/06/18 职场文书
邀请书格式范文
2015/02/02 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python