码迷,mamicode.com
首页 > Web开发 > 详细

js图片无缝滚动

时间:2014-11-04 22:21:01      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   java   sp   div   

<html>
    <head>
        <title>图片滚动</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style>
            #demo {
                background:#fff;
                overflow: hidden;
                width:500px;
                border: 1px solid #ccc;
            }
            #demo img {
                border:3px solid #f2f2f2;
            }
            #indemo {
                float:left;
                width:800%;
            }
            #demo1 {
                float:left;
            }
            #demo2 {
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="indemo">
                <div id="demo1">
                    <a href="#"><img src="../resources/images/1.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/2.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/3.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/4.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/5.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/6.jpg" border="0" /></a>
                </div>
                <div id="demo2"></div>
            </div>
        </div>
        <script type="text/javascript">
            var speed = 5;
            var obj = $(demo);
            var obj1 = $(demo1);
            var obj2 = $(demo2);
            obj2.innerHTML = obj1.innerHTML;
            function marquee() {
                if(obj2.offsetWidth - obj.scrollLeft <= 0) {
                    obj.scrollLeft -= obj1.offsetWidth;
                } else {
                    obj.scrollLeft++;
                }
            }
            var myMar = window.setInterval(marquee,speed);
            obj.onmouseover = function() {
                window.clearInterval(myMar);
            }
            obj.onmouseout = function() {
                myMar = window.setInterval(marquee,speed);
            }
            function $(id) {
                return document.getElementById(id);
            }
        </script>
    </body>
</html>

js属性

网页可见区域高:document.body.clientHeight;

网页可见区域宽:document.body.offsetWidth(包括连线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

 

 

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

js图片无缝滚动

标签:style   blog   http   io   color   ar   java   sp   div   

原文地址:http://www.cnblogs.com/liuwz/p/4074882.html

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