孙肖宁 发布的文章

Width和height

  • clientWidth = width + padding
  • clientHeight = height + padding
  • offsetWidth = width + padding + border
  • offsetHeight = height + padding + border
  • scrollWidth = 内容宽度（不包含border）
  • scrollHeight = 内容高度（不包含border）

top和left

  • offsetTop/offsetLeft ：

    • 调用者：任意元素。(盒子为主)
    • 作用：距离父系盒子中带有定位的距离。

  • scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

    • 调用者：document.body.scrollTop/.....(window)
    • 作用：浏览器无法显示的部分（被卷去的部分）。

  • clientY/clientX:（clientTop/clientLeft 值的是border）

    • 调用者：event.clientX(event)
    • 作用：鼠标距离浏览器可视区域的距离（左、上）。

clientWidth和clientHeight

clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
注意：
调用者不同，意义不同：

  • 盒子调用：指盒子本身。
  • body/html调用：可视区域大小。

clientX和clientY

  • clientX 鼠标距离可视区域左侧距离（event调用）
  • clientY 鼠标距离可视区域上侧距离（event调用）

clientTop和clientLeft

  • clientTop 指的是盒子border的高度
  • clientLeft 指的是盒子border的宽度

获取屏幕可视区域的宽高

  • ie9及其以上的版本:window.innerWidth/Height

  • 标准模式（有DTD）（“CSS1Compat”）

    document.documentElement.clientWidth
document.documentElement.clientHeight
  • 怪异模式 （没有DTD）
document.body.clientWidth
document.body.clientHeight

  • 封装的兼容性写法

      function client(){
      if(window.innerHeight !== undefined){
          return {
              "width": window.innerWidth,
              "height": window.innerHeight
          }
      }else if(document.compatMode === "CSS1Compat"){
          return {
              "width": document.documentElement.clientWidth,
              "height": document.documentElement.clientHeight
          }
      }else{
          return {
              "width": document.body.clientWidth,
              "height": document.body.clientHeight
          }
      }
  }

检测屏幕宽度（分辨率）
window.screen.width

描述：由于浏览器的渲染内核不一样，当页面过长或者过宽的时候，出现的滚动条的样式不一致，所以我们可以自己写滚动条。当文字过多的时候，就会出现滚动条，滚动条的宽度和内容的多少成反比。用户可以通过拖拉滚动条的方式查看全部内容。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟滚动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid #84fcff;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .scroll {
            width: 20px;
            height: 530px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
        }
        .bar {
            width: 20px;
            background-color: #84fcff;
            border-radius: 10px;
            cursor: pointer;
            position: absolute;
            top: 0;
        }
        .content {
            padding: 15px;
            text-align: center;
            font: 700 180px/200px "宋体";
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var box = document.getElementById("box");//包裹内容最外层的盒子
            var content = box.children[0];//内容区域
            var scroll = box.children[1];//滚动条区域
            var bar = scroll.children[0];//滚动条

            //比例：内容的高/盒子的高 = scroll的高/bar的高 => bar的高 = 盒子的高*scroll的高/内容的高
            var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;//获取滚动条的高度
            bar.style.height = barHeight+"px";//赋值

            bar.onmousedown = function (event) {
                event = event || window.event;

                //获取位置
                var pageyy = event.pageY || scroll().top + event.clientY;//获取鼠标的位置
                var y = pageyy - bar.offsetTop;//获取鼠标在盒子中的位置
                //鼠标移动事件
                document.onmousemove = function (event) {
                    event = event || window.event;

                    //鼠标移动后的位置
                    var pagey = event.pageY || scroll().top + event.clientY;

                    //移动后鼠标在盒子中的位置
                    pagey = pagey - y;

                    //防止越界
                    if(pagey<0){
                        pagey = 0;
                    }
                    if(pagey>scroll.offsetHeight - bar.offsetHeight){
                        pagey = scroll.offsetHeight - bar.offsetHeight;
                    }
                    //bar的移动
                    bar.style.top = pagey+"px";

                    //求出内容的移动距离：内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）
                    var s = pagey*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);

                    //内容移动
                    content.style.marginTop = -s+"px";
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
            //鼠标松开解绑事件
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="content">
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            2<br>
            2<br>
            2<br>
            2<br>
            2<br>
            2<br>
            结束
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>
</body>
</html>

描述：用户在弹出窗口的特定区域点击鼠标左键之后，可以对弹出的窗口进行拖拉，鼠标移开之后，窗口固定在最终的位置，点击关闭按钮，就可以关闭弹出的窗口。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            cursor: move;
        }

        #box_close {
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">注册信息 (可以拖拽)
            <span id="box_close">【关闭】</span>
        </div>
        <div class="bd"></div>
    </div>
</body>
</html>
<script>
    var box = document.getElementById("d_box");//需要移动的盒子
    var drop = document.getElementById("drop");//需要拖拽的盒子
    var box_close = document.getElementById("box_close");//关闭按钮
    startDrop(drop,box);

    /**
     * 鼠标拖动函数
     * @param obj 需要拖拽的盒子
     * @param target 需要移动的盒子
     */
    function startDrop(obj,target) {
        obj.onmousedown = function (event) {
            var event = event || window.event;

            //鼠标的位置
            var pagey = event.pageY||event.clientY+document.documentElement.scrollTop;//documentElement文本元素的根节点
            var pagex = event.pageX || event.clientX+document.documentElement.scrollLeft;

            //鼠标在盒子中的位置
            var x = pagex -target.offsetLeft;
            var y = pagey - target.offsetTop;

            //盒子的移动
            document.onmousemove = function (event) {
                var event = event||window.event;

                //移动后鼠标的位置
                var pageym = event.pageY||event.clientY+document.documentElement.scrollTop;
                var pagexm = event.pageX|| event.clientX+document.documentElement.scrollLeft;

                //目标位置
                var xx = pagexm - x;
                var yy = pageym - y;

                //移到的位置
                target.style.left = xx+"px";
                target.style.top = yy+"px";

                //清除选中的文字
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
        }

        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }
    box_close.onclick = function () {
        box.style.display = "none";
    }
</script>

描述：当用户放在某张图片上的某一位置的时候，该区域在另外的地方进行放大。鼠标离开恢复原状，类似淘宝的查看商品的大图。
原理：准备两张等比例的图片，小的图片是用来正常显示，大的图片用一个小的盒子包起来，多余的地方进行隐藏。鼠标在小图片那个盒子里移动的时候，移动的距离与大盒子图片移动的距离成正比。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 350px;
        height: 350px;
        margin:100px;
        border: 1px solid #ccc;
        position: relative;
    }
    .big {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 360px;
        border: 1px solid #ccc;
        overflow: hidden;
        display: none;
    }
    .mask {
        width: 175px;
        height: 175px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
    }
    .small {
        position: relative;
    }
    img {
        vertical-align: top;
    }
</style>
<body>
    <div class="box">
        <div class="small">
            <img src="images/001.jpg" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="images/0001.jpg" alt=""/>
        </div>
    </div>
</body>
</html>
<script>
    //获取相关元素
    var box = document.getElementsByClassName("box")[0];
    var small = box.firstElementChild || box.firstChild;
    var big = box.children[1];
    var mask = small.children[1];
    var bigImg = big.children[0];
    //控制大盒子和鼠标经过时候的阴影方框的显示和隐藏
    small.onmouseenter = function () {
        mask.style.display="block";
        big.style.display="block";
    }
    small.onmouseleave = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //鼠标移动事件
    small.onmousemove = function (event) {
        event = event || window.event;
        //获取鼠标在页面中的位置
        var pagex = event.pageX || scroll().left+event.clientX;
        var pagey = event.pageY || scroll().top +event.clientY;
        //方框可移动的位置
        var x = pagex - box.offsetLeft-mask.offsetWidth/2;
        var y = pagey - box.offsetTop - mask.offsetHeight/2;
        //防止越界
        if(x<0){
            x=0;
        }
        if(x>small.offsetWidth-mask.offsetWidth){
            x = small.offsetWidth-mask.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>small.offsetHeight-mask.offsetHeight){
            y=small.offsetHeight-mask.offsetHeight;
        }
        //方框的移动
        mask.style.left=x+"px";
        mask.style.top=y+"px";
        //得到比例
        var proportion = bigImg.offsetWidth/small.offsetWidth;
        //得到大图要移动的距离
        var xx = proportion*x;
        var yy = proportion*y;
        //大图进行移动
        bigImg.style.marginTop = -yy+"px";
        bigImg.style.marginLeft = -xx+"px";

    }

    /**
     * 封装的函数，用来获取被卷去的头部和左边部分
     * @returns {{top: number, left: number}}
     */
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>

描述：获取鼠标在页面中某个盒子的位置。当用户鼠标放在页面中的任意一个盒子的时候，可以获取鼠标在该盒子中的具体位置，鼠标离开之后显示为0；
原理：鼠标的位置减去盒子的位置。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标在盒子中的位置</title>
</head>
<style>
    .box{
        width: 300px;
        height: 300px;
        padding-top: 100px;
        background: #91B81D;
        margin: 100px;
        text-align: center;
        font: 20px/30px "华文宋体";
        cursor: pointer;
    }
</style>
<body>
<div class="box">
    鼠标在盒子中的X坐标为：0px;<br>
    鼠标在盒子中的Y坐标为：0px;
</div>
</body>
</html>
<script>
    var box = document.getElementsByClassName("box")[0];
    box.onmousemove = function (event) {
        event = event || window.event;
        var pagex = event.pageX || scroll().left+event.clientX;
        var pagey = event.pageY || scroll().top+event.clientY;
        var targetx = pagex-box.offsetLeft;
        var targety = pagey-box.offsetTop;
        this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"
    }
    box.onmouseout = function () {
        this.innerHTML = "鼠标在盒子中的X坐标为："+0+"px;<br>鼠标在盒子中的Y坐标为："+0+"px;"
    }
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>

描述:
当用户点击页面的任意位置的时候，让控制的部件缓慢移动到该位置。
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标跟随</title>
    <style>
        body{
            height: 3000px;
        }
        img{
            position:absolute;
            padding: 10px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="images/img.jpg"  width="100"/></body>
</html>
<script>
    //获取相关元素
    var img = document.getElementsByTagName("img")[0];
    var timer = null;
    var targetx = 0; var targety = 0;
    var leaderx = 0;var leadery = 0;
    document.onclick = function (event) {
        event = event || window.event;
        //获取移动的位置
        var pageY = event.pageY || scroll().top + event.clientY;
        var pageX = event.pageX || scroll().left + event.clientX;
        //让鼠标位于该空间的中心
        targety = pageY - img.offsetHeight/2;
        targetx = pageX - img.offsetWidth/2;
        clearInterval(timer);
        timer = setInterval(function () {
            leaderx = img.offsetLeft;
            //获取x轴方向的步长
            var stepx = (targetx-leaderx)/10;
            stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
            leaderx = leaderx+stepx;
            img.style.left=leaderx+"px";
            leadery=img.offsetTop;
            //获取y轴方向的步长
            var stepy=(targety-leadery)/10;
            stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
            leadery = leadery+stepy;
            img.style.top=leadery+"px";
            if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
                img.style.top=targety+"px";
                img.style.left=targetx+"px";
                clearInterval(timer);
            }
        },30);
    }
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>

描述：再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
注意：

  • 普通浏览器支持 event（带参，任意参数）
  • ie 678 支持 window.event（无参，内置）
  • 兼容性写法var event = event || window.event;

event的属性

属性作用
timeStamp返回事件生成的日期和时间。
bubbles返回布尔值，指示事件是否是起泡事件类型。
button返回当事件被触发时，哪个鼠标按钮被点击。
pageX光标相对于该网页的水平位置（ie无）
pageY光标相对于该网页的垂直位置（ie无）
screenX光标相对于该屏幕的水平位置
screenY光标相对于该屏幕的垂直位置
target该事件被传送到的对象
type事件的类型
clientX光标相对于该网页的水平位置 （当前可见区域）
clientY作用光标相对于该网页的垂直位置

screenX、pageX和clientX的区别

  • pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
  • screenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
  • clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

pageY和pageX的兼容写法
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

描述：用户根据左侧的楼层号进行选择，点击左侧的楼层可以在整体页面进行跳转。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楼层跳跃</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        ul{
            list-style: none;
            height: 100%;
        }
        ul li{
            height: 100%;
        }
        ol{
            list-style: none;
            position: fixed;
            top: 80px;
            left: 50px;
        }
        ol li{
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</body>
</html>
<script>
    //获取相关元素
    var ul = document.getElementsByTagName("ul")[0];
    var ol = document.getElementsByTagName("ol")[0];
    var ulLiArr = ul.children;
    var olLiArr = ol.children;
    var target = 0;
    var leader = 0;
    var timer = null;
    //为方便给模块赋值颜色，定义一个颜色数组
    var arrColor = ["red","yellow","red","yellow","red"];
    /**
     * 循环绑定事件
     */
    for(var i = 0; i<arrColor.length;i++){
        //赋值颜色
        ulLiArr[i].style.background = arrColor[i];
        olLiArr[i].style.background = arrColor[i];
        //为ol里面的li添加索引
        olLiArr[i].index = i;
        //为ol里面的li设置点击事件
        olLiArr[i].onclick = function () {
            //设定目标值
            target = ulLiArr[this.index].offsetTop;
            clearInterval(timer);
            timer = setInterval(function () {
                var step = (target-leader)/10;
                step = step>0? Math.ceil(step):Math.floor(step);
                leader = leader+step;
                window.scrollTo(0,leader);
                if(Math.abs(target-leader)<=Math.abs(step)){
                    window.scrollTo(0,target);
                    clearInterval(timer);
                }
            },25);
        }
    }
    //把屏幕卷入的部分作为页面的起始值
    window.onscroll = function () {
        leader = scroll().top;
    }
    function scroll(){
        return {
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
  1. 1
  2. ...
  3. 33
  4. 34
  5. 35
  6. 36
  7. 37
  8. 38
  9. 39
  10. ...
  11. 54