javascript网页特效——div的应用

实例一：从下往上的信息滚动特效

<div id="container" style="overflow:hidden;height:100px;">
            <table align="left" cellpadding="0" cellspace="0" border="0">
                <tr>
                    <td id="con1" valign="top">
                    <img src="1.jpg"><img src="1.jpg"><img src="1.jpg">
                    </td>
                </tr>
                <tr>
                    <td id="con2" valign="top"></td>
                </tr>
            </table>
</div>


<script type="text/javascript">     
    var timer = null;               //定时器
    //页面加载完成的事件回调
    function init(){
        var time = 30;      //定义滚动的时间间隔，毫秒
        //获取容器的DOM
        var container = document.getElementById('container');
        var d1 = document.getElementById('con1');
        var d2 = document.getElementById('con2');
        d2.innerHTML = d1.innerHTML //把第二个容器的内容填充为第一个
        function MyMarquee(){           //定义滚动的函数
            //如果d2的高度已经超过最大的限制
            if(d2.offsetHeight <= container.scrollTop)
                //把容器的滚动条恢复到最初的位置
                container.scrollTop -= d1.offsetHeight;
            else{
                //滚动条的位置往top移动一个像素
                container.scrollTop++;
            }
        }
        timer = setInterval(MyMarquee,time);//开始一个定时执行
        container.onmouseover=function() {  //定义鼠标放上事件
            clearInterval(timer);           //结束滚动
        }
        container.onmouseout=function() {   //定义鼠标移出事件
            timer=setInterval(MyMarquee,time);//再次开始
        }
    }           
</script>

实例二：灯箱效果

<script type="text/javascript">
            //监听显示灯箱层的按钮事件
            function showLightBox(){
                //获取层box的DOM
                var box = document.getElementById('box');
                box.style.display = 'block';    //显示层
                h = box.offsetHeight;       //计算得到层的实际高度
                var img = document.getElementById('pic1');//得到中心图片的DOM
                img.style.top = (h/2)+'px';     //把它的高度居中
            }
            //关闭事件的函数
            function closeLightBox(){
                //获取层box的DOM
                var box = document.getElementById('box');
                box.style.display = 'none';//隐藏层
            }
</script>

<p>
            <input type="button" value="show" onclick="showLightBox()"/>
</p>
<div id="box">
            <img src="1.jpg" id="pic1"/>
            <a href="####" id="closeBtn" onload="closeLightBox()" onclick="closeLightBox()">关闭</a>
</div>

<style>
            #box{
                position: absolute;
                left:0;
                top:0;
                /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
                z-index: 99;
                border: 1px solid red;
                width:100%;
                height:100%;
                background-color: gray;
                margin: 0 auto;
                display: none;
            }
            #box img{
                position: relative;             
            }
            #closeBtn{
                position: absolute; 
                top: 5px;
                right: 5px;
            }
        </style>

实例三：让层的叠放层次分明

<script type="text/javascript">     
            function change(x){
                var con1 = document.getElementById('con1');
                var con2 = document.getElementById('con2');
                if(con1.style.zIndex == 1){
                    con2.style.zIndex = 1;
                    con1.style.zIndex = 2;
                }else{
                    con1.style.zIndex = 1;
                    con2.style.zIndex = 2;
                }               
            }
</script>   

<style>
            div{
                width:100px;
                height:100px;
                position: absolute;
            }
            #con1{              
                background-color:gray;              
                left: 50px;
                top: 50px;
                z-index = 1;
            }
            #con2{
                background-color:pink;              
                left: 100px;
                top: 100px;
                z-index  = 2;
            }
        </style>

<div id="con1">
            这是一个层
        </div>
        <div id="con2">
            这是一个层
        </div>

实例四：由左向右的滚动广告

<script type="text/javascript">     
    var timer = null;               //定时器
    //页面加载完成的事件回调
    function init(){
        var time = 30;              //定义滚动的时间间隔，毫秒
        //获取容器的DOM
        var con_ul = document.getElementById('con_ul');             
        function MyMarquee(){   
            //滚动条的位置往左边移动一个像素
            var left = con_ul.style.left;//得到当前的坐标坐标
            left = parseInt(left);      //得到数字的值
            con_ul.style.left = (left-1)+'px';//把左坐标向左移动
            //如果移动到了头
            if(left*-2 == parseInt(con_ul.style.width)){
                con_ul.innerHTML += con_ul.innerHTML;//自我内容拷贝一份
            }
        }
        timer = setInterval(MyMarquee,time);//开始一个定时执行
        con_ul.onmouseover=function() { //定义鼠标放上事件
            clearInterval(timer);           //结束滚动
        }
        con_ul.onmouseout=function() {  //定义鼠标移出事件
            timer=setInterval(MyMarquee,time);//再次开始
        }
    }           
</script>


<div id="container" style="width:800px;visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px;">
        <ul id="con_ul" style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 3886px; left: 0px;">
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
            <li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
        </ul>
</div>