<!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>无标题文档</title>
<style>
body{margin:0;padding:0;}
.auto{position:relative;width:100%;height:40px;overflow:hidden;}
.auto div{position:absolute;top:0;left:0;width:100%;}
.indent div{text-indent:200px;}
.indent-m{text-align:center;}
</style>
</head>
<body>
<div class="auto" youth="marquee">我来了，你怎么看</div>
<div class="auto indent" youth="marquee">不看，那我走了</div>
<div class="auto indent-m" youth="marquee">走就走了吧</div>
<script type="text/javascript">
var all_w = document.documentElement.clientWidth;
var y_div = document.getElementsByTagName("div")
var mytext = [];
var num_i=0;
for(i=0;i<y_div.length;i++){
if(y_div[i].getAttribute("youth")=="marquee"){
marqueeAuto(i)
}
}
//内容写在变量里
function marqueeAuto(i){
mytext[i] = y_div[i].innerHTML;
y_div[i].innerHTML = "";
addnode(i)
addnode(i)
y_div[i].childNodes[0].style.left = -all_w +"px";
anima(i)
}
function anima(k){
num_i = num_i+1;
y_div[k].childNodes[0].style.left = (num_i-all_w) +"px";
y_div[k].childNodes[1].style.left = num_i +"px";
//当第二个对象等于窗口宽时删除
if(num_i > all_w || num_i == all_w){
num_i = 0;
y_div[k].removeChild(y_div[k].childNodes[1]);
addnode(k);
}
//速度快慢调整第二个参数
setTimeout("anima("+k+")",50)
}
function addnode(k){
var newItem=document.createElement("div")
var textnode=document.createTextNode(mytext[k])
newItem.appendChild(textnode)
y_div[k].insertBefore(newItem,y_div[k].childNodes[0]);
}
</script>
</body>
</html>
扫一扫
3141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
