码迷,mamicode.com
首页 > 其他好文 > 详细

层的应用-由左向右的滚动广告

时间:2016-09-22 21:11:32      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

——————————————————————

<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>

——————————————————————————

<style>
            #container li{
                overflow: hidden;
                float: left;
                margin: 0 5px;
            }
</style>

——————————————————————————

<body style="text-align:center" onload="init();">
    <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>
    </body>

——————————————————————————

 

层的应用-由左向右的滚动广告

标签:

原文地址:http://www.cnblogs.com/hanxuming/p/5897776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!