您的位置：首页 > Web前端 > JavaScript

2012.12.8一个符合w3c标准的可以代替marquee标签实现翻滚效果的javascript脚本

2012-12-08 18:20 736 查看

由于最近网站需要使用文字翻滚的效果，因为marquee不是w3c标准标签，并且滚动时会出现一段时间的空白，因此使用下面的javascript脚本实现翻滚效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>demo6</title>

<style type="text/css">

ul,li{margin:0;padding:0;font-size:12px;color:#999;}

ul{height:100px;overflow:hidden;}

ul li{line-height:20px;height:20px;}

</style>

</head>

<body>

<ul id="list">

<li>“卧槽泥马”：又一网络新词1</li>

<li>“卧槽泥马”：又一网络新词2</li>

<li>“卧槽泥马”：又一网络新词3</li>

<li>“卧槽泥马”：又一网络新词4</li>

<li>“卧槽泥马”：又一网络新词5</li>

<li>“卧槽泥马”：又一网络新词6</li>

<li>“卧槽泥马”：又一网络新词7</li>

<li>“卧槽泥马”：又一网络新词8</li>

<li>“卧槽泥马”：又一网络新词9</li>

<li>“卧槽泥马”：又一网络新词10</li>

<li>“卧槽泥马”：又一网络新词11</li>

<li>“卧槽泥马”：又一网络新词12</li>

<li>“卧槽泥马”：又一网络新词13</li>

<li>“卧槽泥马”：又一网络新词14</li>

</ul>

<script type="text/javascript">

function scroll(element, delay, speed, lineHeight) {

var numpergroup = 5;

var slideBox = (typeof element == 'string')?document.getElementById(element):element;

var delay = delay||1000;

var speed=speed||20;

var lineHeight = lineHeight||20;

var tid = null, pause = false;

var liLength = slideBox.getElementsByTagName('li').length;

var lack = numpergroup-liLength%numpergroup;

for(i=0;i<lack;i++){

slideBox.appendChild(document.createElement("li"));

}

var start = function() {

tid=setInterval(slide, speed);

}

var slide = function() {

if (pause) return;

slideBox.scrollTop += 2;

if ( slideBox.scrollTop % lineHeight == 0 ) {

clearInterval(tid);

for(i=0;i<numpergroup;i++){

slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);

}

slideBox.scrollTop = 0;

setTimeout(start, delay);

}

}

slideBox.onmouseover=function(){pause=true;}

slideBox.onmouseout=function(){pause=false;}

setTimeout(start, delay);

}

scroll('list', 5000, 1, 20 );//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。

</script>

</body>

</html>

本文“一个符合w3c标准的可以代替marquee标签实现翻滚效果的javascript脚本”，来自：Nuclear'Atk 网络安全研究中心，本文地址：http://lcx.cc/?i=2021，转载请注明作者及出处！

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

标签：

相关文章推荐

新的分享

章节导航