上一篇
下一篇
Marquee by JavaScript
作者:无心 日期:2007-12-27
一段无缝滚动的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="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee by JavaScript</title>
<style type="text/css">
body{text-align:center}
#list{border-collapse:collapse; font:12px Tahoma; margin:0; padding:0; list-style:none; float:left; overflow:hidden}
#list li{text-align:center; margin:0; padding:0 5px; float:left;}
#outwraper{border:1px solid #CCCCCC; padding:10px; margin-top:200px;}
#inwraper{overflow:hidden; float:left;}
img{padding:0; margin:0; border:0;}
</style>
</head>
<body onload="Init();">
<div id="outwraper">
<div id="inwraper">
<ul id="list">
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic1.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic1.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic2.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic2.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic3.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic3.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic4.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic4.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic5.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic5.jpg" alt="" /></li>
</ul>
</div>
</div>
<script type="text/javascript">
var sclInt = 0;
function $(id){
return document.getElementById(id);
}
function Scroll(){
var obj = $("list");
var child = obj.firstChild;
while(child.nodeType == 3){
child = child.nextSibling;
}
var scl = parseInt(child.style.marginLeft == "" ? "0" : child.style.marginLeft);
child.style.marginLeft = "scl + "px";
if (scl <= -child.offsetWidth){
child.style.marginLeft = "0px";
obj.appendChild(child);
}
}
function Init(){
ClearWhiteSpaceNodes($("list"));
$("list").style.width = $("list").childNodes.length * $("list").firstChild.offsetWidth + "px";
$("list").style.height = $("list").firstChild.offsetHeight + "px";
$("inwraper").style.width = ($("list").childNodes.length - 1) * $("list").firstChild.offsetWidth + "px";
$("outwraper").style.width = ($("list").childNodes.length - 1) * $("list").firstChild.offsetWidth + "px";
$("list").onmouseover = function(){clearInterval(sclInt);};
$("list").onmouseout = function(){sclInt = setInterval(Scroll, 10);};
sclInt = setInterval(Scroll, 10);
}
function ClearWhiteSpaceNodes(obj){
for (var i = 0; i < obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType == 3){
if(obj.childNodes[i].nodeValue.match(/^\s*$/g)){
obj.removeChild(obj.childNodes[i]);
i";
}
}
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee by JavaScript</title>
<style type="text/css">
body{text-align:center}
#list{border-collapse:collapse; font:12px Tahoma; margin:0; padding:0; list-style:none; float:left; overflow:hidden}
#list li{text-align:center; margin:0; padding:0 5px; float:left;}
#outwraper{border:1px solid #CCCCCC; padding:10px; margin-top:200px;}
#inwraper{overflow:hidden; float:left;}
img{padding:0; margin:0; border:0;}
</style>
</head>
<body onload="Init();">
<div id="outwraper">
<div id="inwraper">
<ul id="list">
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic1.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic1.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic2.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic2.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic3.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic3.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic4.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic4.jpg" alt="" /></li>
<li><img src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic5.jpg" mce_src="http://www.eternity3.com.cn/wp-content/uploads/2007/12/pic5.jpg" alt="" /></li>
</ul>
</div>
</div>
<script type="text/javascript">
var sclInt = 0;
function $(id){
return document.getElementById(id);
}
function Scroll(){
var obj = $("list");
var child = obj.firstChild;
while(child.nodeType == 3){
child = child.nextSibling;
}
var scl = parseInt(child.style.marginLeft == "" ? "0" : child.style.marginLeft);
child.style.marginLeft = "scl + "px";
if (scl <= -child.offsetWidth){
child.style.marginLeft = "0px";
obj.appendChild(child);
}
}
function Init(){
ClearWhiteSpaceNodes($("list"));
$("list").style.width = $("list").childNodes.length * $("list").firstChild.offsetWidth + "px";
$("list").style.height = $("list").firstChild.offsetHeight + "px";
$("inwraper").style.width = ($("list").childNodes.length - 1) * $("list").firstChild.offsetWidth + "px";
$("outwraper").style.width = ($("list").childNodes.length - 1) * $("list").firstChild.offsetWidth + "px";
$("list").onmouseover = function(){clearInterval(sclInt);};
$("list").onmouseout = function(){sclInt = setInterval(Scroll, 10);};
sclInt = setInterval(Scroll, 10);
}
function ClearWhiteSpaceNodes(obj){
for (var i = 0; i < obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType == 3){
if(obj.childNodes[i].nodeValue.match(/^\s*$/g)){
obj.removeChild(obj.childNodes[i]);
i";
}
}
}
}
</script>
</body>
</html>
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论