修改好的jquery滚动字幕效果实现代码


Posted in Javascript onJune 22, 2011

最终效果图

修改好的jquery滚动字幕效果实现代码

源代码:

<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<script src="http://demo.3water.com/jslib/jquery/jquery.js"></script> 
<script type = "text/javascript"> 
function scroll_news(){ 
var $firstNode = $('#scroll-container li'); 
//得到 i的值 列数 
var iRow = $('#scroll-container').find('li').length ? 1; 
//debugger; 
$(function(){ 
$firstNode.eq(0).fadeOut('slow',function(){ 
$(this).clone().appendTo($(this).parent()).fadeIn('slow'); 
$(this).remove(); 
$firstNode.eq(iRow).hide(); 
}); 
}); 
} 
$(document).ready(function(){ 
go(); 
}); 
function stop(){ 
clearInterval(sn); 
} 
function go(){ 
sn = setInterval('scroll_news()',2000); 
} 
</script> 
<style type="text/css"> 
#scroll-container{border:1px #000 solid;background:#FEC;height:23px;line-height:23px;} 
#scroll-container li{list-style:none;display:none;font-size:12px;} 
li a{color:#F00;text-decoration:none;margin-left:10px;} 
li a:hover{text-decoration:underline;} 
</style> 
</head> 
<body> 
<div id="scroll-container" onMouseOver="stop();" onMouseOut="go();"> 
<li><a href="#">一生这么一次</a></li> 
<li><a href="#">不再因为任性而不肯低头</a> </li> 
<li><a href="#">不再因为固执而轻言分手</a> </li> 
<li><a href="#">坚信一次</a> </li> 
<li><a href="#">一颗心需要坚定地去温暖另一颗心</a> </li> 
<li><a href="#">一直走</a> </li> 
<li><a href="#">就可以到白头</a> </li> 
<li><a href="#">就那样相守</a> </li> 
<li><a href="#">在来往的流年里</a> </li> 
<li><a href="#">岁月安好</a> </li> 
<li><a href="#">惟愿这一生</a> </li> 
<li><a href="#">执子之手</a> </li> 
<li><a href="#">与子偕老</a> </li> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 #Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 #Javascript
jquery一般方法介绍 入门参考
Jun 21 #Javascript
jquery操作select option 的代码小结
Jun 21 #Javascript
jquery随意添加移除html的实现代码
Jun 21 #Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 #Javascript
基于jquery实现的表格分页实现代码
Jun 21 #Javascript
You might like
mysql 全文搜索 技巧
2007/04/27 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
JS类的封装及实现代码
2009/12/02 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
python加载自定义词典实例
2019/12/06 Python
pytorch实现查看当前学习率
2020/06/24 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
服装店营销方案
2014/03/10 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
工作表扬信范文
2015/01/17 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
音乐研修感悟
2015/11/18 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python