热点新闻滚动特效的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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
html下载本地
Jun 19 Javascript
js的写法基础分析
Jan 17 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jquery datatable服务端分页
Aug 31 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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知道与问问的采集插件代码
2010/10/12 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScript中json使用自己总结
2013/08/13 Javascript
JS与C#编码解码
2013/12/03 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python语法快速入门指南
2015/10/12 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python自动发邮件脚本
2017/03/31 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python pygame实现2048游戏
2018/11/20 Python
Python模块的加载讲解
2019/01/15 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
旷工辞退通知书
2015/04/17 职场文书
英文投诉信格式
2015/07/03 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers