scrollLeft,scrollWidth,clientWidth,offsetWidth 详解带实例

laney
laney 发布于 2017-02-17 16:49:03 浏览:134 类型:原创 - 随笔 分类:JavaScript - javascript 二维码: 作者原创 版权保护
  • 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 相对文档的水平座标+垂直方向滚动的量
  • 以上主要指IE之中,FireFox差异如下:
  • IE6.0、FF1.06+:
  • clientWidth = width + padding
  • clientHeight = height + padding
  • offsetWidth = width + padding + border
  • offsetHeight = height + padding + border
  • IE5.0/5.5:
  • clientWidth = width - border
  • clientHeight = height - border
  • offsetWidth = width
  • offsetHeight = height(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
scrollLeft,scrollWidth,clientWidth,offsetWidth 详解带实例

  • HTMLElement.offsetLeft
  • HTMLElement.offsetTop

这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。所以我们要得到她的绝对位置,那么我们必须依次向上获取他的父元素的位置,然后获取它父元素的父元素的offersetLeft和offersetTop,一直递归到浏览器的整个画布横纵距离的时候,例如(  一定注意是相对于父标签的途径!)

  1. innerHTML:inner(里面,元素),innerHTML是用来改变对象DH内部的HTML语句。而此效果中我们所用到的a.innerHTML=b.innerHTML就是b将自己的HTML元素赋予a,用在这里就如克隆一说。
  2. offsetWidth:是指对象包括边框在内的宽度。与clientWidth不同,clientWidth指对象不包括边框只包括内容的实际宽度。
  3. scrollLeft:我们知道scroll是滚动轴,那么scrollLeft就是指滚动轴自左向右滚出时距离左边起点的距离。scroll有四个方向

了解了这三项基本属性,我们就有了初步实现滚动的思想。首先我们要知道一个块就有这么宽,如果里面的内容也和外边包裹它们的父标签宽度一样的话,那么滚动 条的宽度肯定也与内容一样宽,根本就没得滚。只有在里面内容大于父标签内容并且对父标签设置完固定宽进行超出部分隐藏。这样即使在我们并没有控制js时也 是可以实现手动拖拉滚动条的。
了解这点后再说循环滚动,既然子标签要超出父标签才能实现滚动,那么循环滚动,循环展示一组图片不就是需要两组一模一样的图 片首尾相接,当第一块的尾部滚过后第二块的首部立马相接,当然控制好精确到1px时,用户是根本察觉不到是两组图片在做滚动,因为是相同的。说完原理,再 说实现办法,我们已经知道了scrollLeft的意思,那么要让图片向左滚,无疑就是增加它的数值,在我们手动拖拉滚动条时也会观察到向右拖拉时图片是想做移动的,scrollLeft的距离在不断增加。那么也就是说,要实现子标签图片的滚动,就要控制父标签的scrollLeft。再加上计时器,让父标签的scrollLeft每过多久增加多少不久实现了自动的图片滚动了吗?下面请看代码吧,在HTML的结构上也是需要做下详解的。

要清楚scrollleft 是父标签的,scrollleft是个值,父标签就是指的产生滚动条这个元素,,而滚动条也属于,父标签。

.section .scroll-left,
.section .scroll-right {
  width: 65px;
  height: 76px;
  position: absolute;
  outline: none;
}
.section .scroll-left a,
.section .scroll-right a {
  display: inline-block;
  outline: none;
  width: 65px;
  height: 76px;
  background: url("../images/scroll-left.png") no-repeat center center;
}
.section .scroll-left {
  left: 15px;
  top: 220px;
}
.section .scroll-right {
  right: 70px;
  top: 220px;
}
.section .scroll-right a {
  background: url("../images/scroll-right.png") no-repeat center center;
}
.section .scroll-left:hover,
.section .scroll-right:hover {
  background: url("../images/scroll-hover.png") no-repeat center center;
}
.section .section-main {
  height: 450px;
  background: url("../images/bg6.png") no-repeat center center;
  padding-top: 135px;
  position: relative;
}
.section .section-main #scroll-box {
  width: 1050px;
  height: 242px;
  overflow: hidden;
  position: relative;
  box-shadow: 2px 0 3px #aaaaaa;
  margin: 0 auto;
  left: -28px;
  border: 1px solid #ffffff;
}
.section .section-main #scroll-box .inscroll,
.section .section-main #scroll-box .box1,
.section .section-main #scroll-box .box2 {
  float: left;
  height: 242px;
}
.section .section-main #scroll-box .inscroll {
  width: 3000px;
}
.section .section-main #scroll-box a {
  display: inline-block;
  width: 180px;
  height: 240px;
}
.section .section-main #scroll-box a img {
  width: 180px;
  height: 240px;
  box-shadow: 1px 0 3px #aaaaaa;
}


<div class="section-main">
        <div class="">
            <div class="scroll-left">
                <a class="s-left" href="javascript:void(0);"></a>
            </div>
            <div id="scroll-box">
                <div class="inscroll">
                    <div class="box1">
                        <a href="#"><img src="./images/book1.jpg" border="0"/></a>
                        <a href="#"><img src="./images/book2.jpg" border="0"/></a>
                        <a href="#"><img src="./images/book3.jpg" border="0"/></a>
                        <a href="#"><img src="./images/book4.jpg" border="0"/></a>
                        <a href="#"><img src="./images/book5.jpg" border="0"/></a>
                        <a href="#"><img src="./images/book3.jpg" border="0"/></a>
                    </div>
                    <div class="box2"></div>
                </div>
            </div>
            <div class="scroll-right">
                <a class="s-right" href="javascript:void(0);"></a>
            </div>
        </div>
    </div>

var speed = 10;
        //    var speed = 10;
        var direction = "left";
        var tab = document.getElementById("scroll-box");
        var tab1 = document.getElementsByClassName("box1")[0];
        var tab2 = document.getElementsByClassName("box2")[0];
        var leftDir = document.getElementsByClassName("s-left")[0];
        var rightDir = document.getElementsByClassName("s-right")[0];
        tab2.innerHTML = tab1.innerHTML;

        function marquee() {
            switch (direction) {
                case "left":
//滚动轴停了,图片必定也滚到尽头了,这时就判断第一个或第二个(二者同宽)

//的宽度(或加边或不加边)是不是已经大于或等于父标签div的scrollLeft

if (tab2.offsetWidth - tab.scrollLeft <= 0)
                        tab.scrollLeft -= tab1.offsetWidth;
                    else {
                        tab.scrollLeft++;
                    }
                    break;
                case "right":
                    if (tab.scrollLeft <= 0) {
                        tab.scrollLeft += tab2.offsetWidth;
                    }
                    else {
                        tab.scrollLeft--;
                    }
                    break;
            }
        }
        function changeDirection(dir) {
            direction = dir;
        }
        var MyMar = setInterval(marquee, speed);
        tab.onmouseover = function () {
            clearInterval(MyMar)
        };
        tab.onmouseout = function () {
            MyMar = setInterval(marquee, speed)
        };
        leftDir.onclick = function () {
            changeDirection("left");
        };
        rightDir.onclick = function () {
            changeDirection("right");
        };
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
laney laney 作者

作者最新