首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

<marquee> 图片扫尾相连1

2012-10-23 
marquee图片收尾相连1!DOCTYPE html PUBLIC html xmlnshttp://www.w3.org/1999/xhtmlheadstyl

<marquee> 图片收尾相连1
<!DOCTYPE html PUBLIC >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.col_kx { OVERFLOW: hidden; WIDTH: 700px }
</style>
</head>
<body>

<div id="header_demo" cellspacing="0" cellpadding="0">
    <tr>
        <td id="header_demo1" nowrap>
            <!--滚动头条-->                                                                      
        <img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg>
        <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=10;    //数值越大滚动速度越慢
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>

热点排行