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

2024-09-27 13:14:52

代码如下:

<!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">

</style>
</head>

<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href='http://www.jb51.net' target='_blank'>我们</a>";
marqueeContent[1]="<a href='http://play.jb51.net' target='_blank'>播放器之家</a>";
marqueeContent[2]="<a href='http://sc.jb51.net' target='_blank'>素材之家</a>";
marqueeContent[3]="<a href='http://mingzi.jb51.net' 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>

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

复制代码代码如下: <!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="
顶部缓冲下拉菜单导航特效的JS代码

复制代码代码如下: <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px'
符合web标准的连续滚动图像的js代码

//more javascript from http://www.smallrain.net var images=Array(); images.push("http://www.smallrain.net/jsimg/1.jpg"); images.push("#"); images.push("http://www.smallrain.net/jsimg/2.jpg"); images.push("#"); image
js实现图片无缝滚动特效

首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter
JS仿万科底部的新闻滑动特效代码

废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿万科的底部的新闻滑动特效</title> <style> * { padding: 0; margin: 0; } #subject { position: relative; width:
原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻.动态.充值记录等,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <s
angularjs实现文字上下无缝滚动特效代码

最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}
图片动画横条广告带上下滚动的JS代码

复制代码代码如下: <!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=
js文字横向滚动特效

本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局 <div id="scroll_div" class="fl"> <div id="scroll_begin"> 恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span> 恭喜793765***获得 <span class="pad_righ
js实现无缝滚动特效

本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval) 4.鼠标移到图片上,高亮(a:hover) 5.点击小图, 下面的大图会改变 6.文字区域随着图片的变化而变

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

相关推荐

随机推荐