Marquee

最新推荐文章于 2021-08-03 22:58:03 发布

weixin_30291791

最新推荐文章于 2021-08-03 22:58:03 发布

阅读量46

点赞数

原文链接：http://www.cnblogs.com/flat_peach/archive/2008/12/08/1350356.html

版权

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

实现首尾相连的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>

转自 http://www.cnblogs.com/eflylab/archive/2008/10/07/1305495.html

转载于:https://www.cnblogs.com/flat_peach/archive/2008/12/08/1350356.html

weixin_30291791

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Marquee

Marquee首尾相连不间断移动开始完全显示实现首尾相连的Marquee效果，并且在开始时完整显示内容。而不是从左边渐渐移动出来！有时很需要类似效果！发布出来。<html><title>模拟Marquee实现首尾想连的移动效果</title><head><style>.col_kx{OVERFLOW...
复制链接

扫一扫