热点新闻滚动特效的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高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
原生JS生成指定位数的验证码
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
天津市收音机工业发展史
2021/03/04 无线电
mayfish 数据入库验证代码
2010/04/30 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP 文件上传限制问题
2019/09/01 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
深入理解Promise.all
2018/08/08 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Python脚本获取操作系统版本信息
2016/12/17 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python实现字符串和数字拼接
2020/03/02 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
企业挂职心得体会
2014/09/10 职场文书
Python基础之数据结构详解
2021/04/28 Python