修改好的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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
Jquery ajax基础教程
Nov 20 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
使用js和canvas实现时钟效果
Sep 08 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
PHP 日期加减的类,很不错
2009/10/10 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
prototype class详解
2006/09/07 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
javascript代码实现简易计算器
2021/01/25 Javascript
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
个人简历自我评价怎么写
2015/03/10 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书