一个CSS+JavaScript编写的跑马灯程序

最新推荐文章于 2024-05-30 10:50:01 发布

phoenixdsf

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量1.3k

点赞数

分类专栏：自学天地文章标签： javascript css div scroll 浏览器 border

自学天地专栏收录该内容

18 篇文章 0 订阅

订阅专栏

转自：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片跑马灯</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>

<!--

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

-->

    <table width="308" border="1" align="center">
        <tr>
            <td >
                <div id="div1" style=" display:inline">
                    <img src="image/01_s.jpg" width="214" height="203" style="display:inline"/><img src="image/02_s.jpg" width="214" height="203" style="display:inline"/><img src="image/03_s.jpg" width="214" height="203"style="display:inline" />
                   </div>
            </td>
            <td>
                <div id='div2' style=" display:inline">
                </div>
            </td>
        </tr>
    </table>
</div>
    <script type="text/javascript">
    alert(window.screen.availWidth );
        document.getElementById('div2').innerHTML=document.getElementById('div1').innerHTML;
        function move()
        {
            if(document.getElementById('div2').offsetWidth-document.getElementById('div').scrollLeft<=0)
                   {

                        document.getElementById('div').scrollLeft-=document.getElementById('div2').offsetWidth;
                 }
               document.getElementById('div').scrollLeft+=1;
        }
        setInterval("move()",10)
    </script>
    </body>
</html>

phoenixdsf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个CSS+JavaScript编写的跑马灯程序

转自：图片跑马灯可能的值值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内
复制链接

扫一扫

专栏目录