Marquee首尾相连不间断移动开始完全显示

掉到坑里 · 发表于 2009-3-31 19:03:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？快速注册

×

实现首尾相连的Marquee效果，并且在开始时完整显示内容。而不是从左边渐渐移动出来！
有时很需要类似效果！发布出来。

<html>
<title>模拟Marquee实现首尾想连的移动效果</title>
<head>
<style>
.col_kx { OVERFLOW: hidden; WIDTH: 700px }
</style>
</head>
<body>
<div id="header_demo" class="col_kx">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header_demo1" nowrap>

<a href="">新婚夫妇如何理财</a>
<a href="">原创连载之-----70男和80女的同居理财故事 (2)</a>
<a href="">魂牵梦萦人</a>
<a href="">金融直播室</a>
<a href="">魂牵梦萦人</a>
<td id="header_demo2" nowrap></td>
</tr>
</table>
</div>
<script>
//滚动头条
//滚动效果
var header_demo = document.getElementById("header_demo");
var header_demo1 = document.getElementById("header_demo1");
var header_demo2 = document.getElementById("header_demo2");
var speed=20; //数值越大滚动速度越慢
header_demo2.innerHTML = header_demo1.innerHTML;

//header_demo2.offsetWidth 总宽度
alert(header_demo2.offsetWidth +"-"+header_demo.scrollLeft);

function Marquee(){
if(header_demo2.offsetWidth-header_demo.scrollLeft<=0)
header_demo.scrollLeft-=header_demo1.offsetWidth
else{
header_demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee,speed);
header_demo.onmouseover =
function(){clearInterval(MyMar)}
header_demo.onmouseout =
function(){MyMar = setInterval(Marquee,speed)}
</script>
</body>
</html>

眼镜蛇 · 发表于 2011-5-6 10:50:06

MARK一下
会用到的

账号		自动登录	找回密码
密码			快速注册

Marquee首尾相连不间断移动 开始完全显示

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

Marquee首尾相连不间断移动开始完全显示