js新闻滚动和弹出div层效果

<style type="text/css">
    #scroll
    {
        margin: 0;
        padding: 4px 0;
        list-style: none;
        width: 100%;
        height: 20px;
        overflow: hidden;
    }
    #scroll li
    {
        margin: 0;
        padding: 0 4px;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
    }
    
    .black_overlay
    {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=88);
    }
    .white_content
    {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 55%;
        height: 55%;
        padding: 20px;
        border: 3px solid #256BB6;
        background-color: white;
        z-index: 1002;
        overflow: auto;
        background-color:#FFFFFF;
    }
</style>

---------------------------------------------------------------------------------------------------------------------------------------------------------

<div id="light" class="white_content">
    <span style="font-size: 20px; margin-left: 300px">通知公告</span><span style="float: right">
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
            <img src="/DesktopModules/FAQs/image/gif-0965.gif" /></a></span>
    <%=Publishnews2%>
</div>
<div id="fade" class="black_overlay">
</div>

------------------------------------------------------------------------------------------------------------------------------------------------------------

 window.onload = function () {
        dMarquee('scroll');
    }

    function dMarquee(id) {
        var speed = 30; //速度
        var stop = 3000; //停止时间

        var ul = document.getElementById(id);
        var rows = ul.getElementsByTagName('li').length;
        var height = ul.getElementsByTagName('li')[0].offsetHeight;

        ul.innerHTML += ul.innerHTML;

        var timeID = false;

        var play = function () {
            ul.scrollTop++;

            if (ul.scrollTop == rows * height) {
                ul.scrollTop = 0;
            }

            if (ul.scrollTop % height == 0) {
                timeID = setTimeout(play, stop);
            } else {
                timeID = setTimeout(play, speed);
            }
        }

        timeID = setTimeout(play, stop);
        ul.onmouseover = function () { clearTimeout(timeID); }
        ul.onmouseout = play;
    }

    function getpublish() {
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = ''
    }

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2011-11-25 12:57  larryle  阅读(141)  评论(0)    收藏  举报