求两个同时向上滚动的文字代码 JS的
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.scrollDiv {
position: relative;
margin: auto;
height: 70px;
width: 50%;
overflow: hidden;
border: 1px solid black;
}
.scrollDiv ul {
position: absolute;
top: 0px;
}
.scrollDiv ul>li {
height: 24px;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var ul0 = document.getElementById ('ul');
var ul1 = document.getElementById ('ul1');
var ul2 = document.getElementById ('ul2');
var t;
var funny = function (ul0, isUp, sleep)
{
if (!isUp)
{
ul0.style.top = "-24px";
ul0.insertBefore (ul0.children[ul0.children.length - 1], ul0.children[0]);
}
clearInterval (ul0.t);
ul0.t = setInterval (function ()
{
var tmp = isUp ? -24 : 0;
var speed = (tmp - (parseFloat (ul0.style.top) || ul0.offsetTop)) / 9;
if (speed > 0)
{
speed = Math.ceil (speed);
}
else if (speed < 0)
{
speed = Math.floor (speed);
}
else
{
!!isUp ? ul0.style.top = "0px" : 0;
!!isUp ? ul0.appendChild (ul0.children[0]) : 0;
clearInterval (t);
}
ul0.style.top = (parseFloat (ul0.style.top) || ul0.offsetTop) + speed + "px";
}, sleep);
}
ul0.interval = setInterval (function ()
{
funny (ul0, 1, 30);
}, 800);
ul1.interval = setInterval (function ()
{
funny (ul1, 0, 50);
}, 800);
ul2.interval = setInterval (function ()
{
funny (ul2, 1, 70);
}, 800);
ul0.onmouseover = function ()
{
clearInterval (this.t);
clearInterval (this.interval);
};
ul0.onmouseout = function ()
{
this.interval = setInterval (function ()
{
funny (ul0, 1, 30);
}, 800);
};
ul1.onmouseover = function ()
{
clearInterval (this.t);
clearInterval (this.interval);
};
ul1.onmouseout = function ()
{
ul1.interval = setInterval (function ()
{
funny (ul1, 0, 50);
}, 800);
};
ul2.onmouseover = function ()
{
clearInterval (this.t);
clearInterval (this.interval);
};
ul2.onmouseout = function ()
{
ul2.interval = setInterval (function ()
{
funny (ul2, 1, 70);
}, 800);
};
}
</script>
</head>
<body>
<div class="scrollDiv">
<ul id="ul">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
<div style="top: 40px;" class="scrollDiv">
<ul id="ul1">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
<div style="top: 80px;" class="scrollDiv">
<ul id="ul2">
<li>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</li>
<li>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</li>
<li>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</li>
<li>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</li>
<li>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</li>
<li>第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行第六行</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
