您的位置：首页 > 其它

单行文字不断向上滚动特效

2014-04-21 13:07 351 查看

解决方案1

<script>
var marqueeContent=new Array();
//滚动新闻
marqueeContent[1]='世界名牌理事会会员单位<br>';
marqueeContent[2]='2008中国十大美容美体连锁机构<br>';
marqueeContent[3]='2008中国十佳明星美容院<br>';
marqueeContent[4]='商务部特许经营备案企业<br>';
marqueeContent[0]='web3.0时代<br>';
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;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(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>

解决方案2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div{width:200px;height:20px;overflow:hidden;}
</style>
</head>
<body>
 <div id="container"><div>第一个标题</div><div>第二个标题</div><div>第三个标题</div></div>   //这里的div之间不能留有空格或者换行
<script language="JavaScript">

function roll()
{
var container=document.getElementById('container');
var child = container.firstChild;

if(child.style.marginTop=='')
{
child.style.marginTop='0px';
}

if(parseInt(child.style.marginTop)==-child.offsetHeight)
{
child.style.marginTop = "0px";
container.appendChild(child);
setTimeout("roll()",roll.stoptime)
}
else
{
if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight)
{
child.style.marginTop = - child.offsetHeight + "px";
}
else
{
child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px";
setTimeout("roll()",roll.timeout)
}

}
}

roll.timeout = 20;    //时长
roll.step = 1;        //步伐
roll.stoptime = 2000; //停留时间
roll();

</script>
</body>
</html>

论坛地址：http://bbs.blueidea.com/thread-2848725-1-1.html

在实际测试中发现，上面代码不兼容火狐和谷歌浏览器（其他浏览器尚未测试），其原因是以为浏览器对dom元素的解析不同。

IE会忽略节点之间生成的空白文本节点（比如换行字符），而火狐则不会，所以取到的firstChild会存在差异。
做兼容性处理后的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
div{width:200px;height:20px;overflow:hidden;}
</style>
</head>
<body>
<!--这里的html代码可以任意格式化-->
<div id="container">
<div>第一个标题</div>
<div>第二个标题</div>
<div>第三个标题</div>
</div>
</body>

<script language="JavaScript">
//获取第一个子元素
function get_firstchild(obj)
{
var child=obj.firstChild;
while (child.nodeType!=1)
{
child=child.nextSibling;
}
return child;
}

function roll()
{
var container=document.getElementById('container');
var child = get_firstchild(container);

if(child.style.marginTop=='')
{
child.style.marginTop='0px';
}

if(parseInt(child.style.marginTop)==-child.offsetHeight)
{
child.style.marginTop = "0px";
container.appendChild(child);
setTimeout("roll()",roll.stoptime)
}
else
{
if(parseInt(child.style.marginTop) - roll.step < -child.offsetHeight)
{
child.style.marginTop = - child.offsetHeight + "px";
}
else
{
child.style.marginTop = parseInt(child.style.marginTop) - roll.step + "px";
setTimeout("roll()",roll.timeout)
}

}
}

roll.timeout = 20;    //时长
roll.step = 1;        //步伐
roll.stoptime = 2000; //停留时间

//执行
roll();
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航