热点新闻滚动特效的js代码


Posted in Javascript onAugust 17, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>热点新闻滚动</title>
<style type="text/css">
<!--
body {
 margin: 0px;
 font-size: 12px;
 color: #938C43;
 line-height: 150%;
 text-align:center;
}
a:link{color: #9D943A;font-size:12px;}
a:hover{color: #FF3300;font-size:12px;}
a:visited{color: #9D943A;font-size:12px;}
a.red:link{color: #ff0000;font-size:12px;}
a.red:hover{color: #ff0000;font-size:12px;}
a.red:visited{color: #ff0000;font-size:12px;}
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;}
-->
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href='https://3water.com' target='_blank'>三水点靠木</a>";
marqueeContent[1]="<a href='http://play.3water.com' target='_blank'>播放器之家</a>";
marqueeContent[2]="<a href='http://sc.3water.com' target='_blank'>素材之家</a>";
marqueeContent[3]="<a href='http://mingzi.3water.com' target='_blank'>个性名字网</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
 var str=marqueeContent[0];
 document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
 marqueeId++;
 marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
 var str=marqueeContent[marqueeId];
 marqueeId++;
 if(marqueeId>=marqueeContent.length) marqueeId=0;
 if(document.getElementById("marqueeBox").childNodes.length==1) {
 var nextLine=document.createElement('DIV');
 nextLine.innerHTML=str;
 document.getElementById("marqueeBox").appendChild(nextLine);
 }
 else {
  document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
  document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
  document.getElementById("marqueeBox").scrollTop=0;
 }
 clearInterval(marqueeInterval[1]);
 marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
 document.getElementById("marqueeBox").scrollTop++;
 if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
 clearInterval(marqueeInterval[1]);
 }
}
initMarquee();
</script>
</body>
</html></td>
   </tr>
 </table>     
Javascript 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
js 获取radio按钮值的实例
Aug 17 #Javascript
js 文本滚动效果的实例代码
Aug 17 #Javascript
javascript用户注册提示效果的简单实例
Aug 17 #Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 #Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 #Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 #Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php中apc缓存使用示例
2013/12/25 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
19个Android常用工具类汇总
2014/12/30 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
nodejs基础知识
2017/02/03 NodeJs
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python实现Linux中的du命令
2017/06/12 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python如何进入交互模式
2020/07/06 Python
python excel和yaml文件的读取封装
2021/01/12 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
实现向右循环移位
2014/07/31 面试题
构建高效课堂实施方案
2014/03/13 职场文书
大班幼儿评语大全
2014/04/30 职场文书
关爱留守儿童标语
2014/06/18 职场文书
乐山大佛导游词
2015/02/02 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Python机器学习之KNN近邻算法
2021/05/14 Python
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang