10_JS的offset家族、事件對象

JS三大系列

三大家族（offset/scroll/client）
事件對象 (event)
（事件被觸動時，鼠標和鍵盤的狀態）
（通過屬性控制）

offset家族

目的： js中有一套方便的獲取元素尺寸的辦法就是offset家族；

offsetWidth、offsetHeight

得到對象的寬度和高度(自己的，與他人無關)

offsetWidth = width + border + padding

div {  width:220px;  border-left:2px solid red; padding:10px;}
div.offsetWidth =  220 + 2 + 20

為什么不用 div.style.width，因為div.style.width只能得到行內式中設置的寬高的數值

offsetLeft、offsetTop

返回距離上級盒子（最近的帶有定位）左邊的位置

如果父級都沒有定位則以body 為準
這里的父級指的是所有上級節點，不僅僅指的是父親，還可以是爺爺曾爺爺曾曾爺爺。。。。
offsetLeft 從父親的padding 開始算父親的border 不算
**總結一下： ** 就是子盒子到定位的父盒子邊框到邊框的距離

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .gradeFater{
            width: 300px;
            height: 300px;
            background-color: #ccc;
        }
        .fater{
            /*position: relative;*/
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding: 10px;
            border: 1px solid #cccccc;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var son = document.getElementById("son");
            //沒有定位時，打印8，相對于body
            //當在gradeFater上添加position: relative;打印11
            //當在fater上添加position: relative;打印10
            console.log(son.offsetTop);
        }
    </script>
</head>
<body>
    <div class="gradeFater">
        <div class="fater">
            <div class="son" id="son"></div>
        </div>
    </div>
</body>
</html>

例：筋斗云

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>筋斗云</title>
    <style type="text/css">
        body{
            background-color: #000;
        }
        body,ul,li{
            margin: 0;
            padding: 0;

        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .nav{
            width: 880px;
            height: 42px;
            margin: 100px auto;
            border-radius: 5px;
            background: url("images/rss.png") no-repeat right center #fff;
            position: relative;
        }
        .cloud{
            position: absolute;
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat left;
            left: 0;
            top: 0;
        }
        .nav ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        .nav ul li{
            float: left;
            width: 83px;
            height: 42px;
            line-height: 42px;
            /*background-color: #fff;*/
            /*margin-left: 8px;*/
            text-align: center;
        }
        .nav a{
            font-size: 14px;
            color: #000;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var nav = document.getElementById("nav");
            var cloud = nav.children[0];
            var lis = nav.children[1].children;

            var leader = 0,target = 0;
            var current = 0;
            for(var i=0 ; i<lis.length ; i++){
                var li = lis[i];
                li.index = i;
                li.onmouseover = function () {
                    //老做法，但是當li的寬度改變就出問題了，所以使用offSetLeft
//                    target = this.index*83;
                    target = this.offsetLeft;
                }
                li.onmouseout = function () {
                    target = current;
                }
                li.onclick = function () {
                    current = this.offsetLeft;
                }
            }
            function AnimationPlay(){
                leader = leader + (target - leader)/20;
                cloud.style.left = leader+"px";
            }
            setInterval(AnimationPlay,10);

        }
    </script>
</head>
<body>
    <div class="nav" id="nav">
        <div class="cloud">
            
        </div>
        <ul>
            <li><a href="#">首頁新聞</a></li>
            <li><a href="#">師資力量</a></li>
            <li><a href="#">活動策劃</a></li>
            <li><a href="#">企業文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司簡介</a></li>
            <li><a href="#">上海校區</a></li>
        </ul>
    </div>
</body>
</html

offsetParent

返回改對象的父級（帶有定位）

如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative，fixed）， offsetParent為body。
如果當前元素的父級元素中有CSS定位（position為absolute或relative，fixed）， offsetParent取最近的那個父級元素。
與parentNode的區別：parentNode是返回直接父親元素，offsetParent是返回有定位的父級元素

offsetTop、style.top 的區別

一、最大區別在于 offsetTop 可以返回沒有定位的盒子距離頂部的位置。而 style.top 不可以
　　只有定位的盒子，才有 style.left、style.top、style.right、style.bottom
二、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
三、offsetTop 只讀，而 style.top 可讀寫。
四、如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串。style.top只能返回行內樣式設置的top距離
五、最重要的區別， style.top只能返回行內樣式設置的top距離，offsetLeft隨便

事件對象

我們學過一些事件 : onmouseover onmouseout onclick .....、btn.onclick = function(event) { 語句 }
　　event 單詞翻譯過來事件的意思。event 就是事件的對象，指向的是事件是 onclick
　　在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象中包含著所有與事件有關的信息。所有瀏覽器都支持event對象，但支持的方式不同。比如鼠標操作時候，會添加鼠標位置的相關信息到事件對象中。
　　普通瀏覽器支持 event， IE 6、7、8 支持 window.event，所以我們采取兼容性的寫法：

var event = event || window.event;

event 常見屬性

pageX 、clientX 、screenX 區別

screenX 是以我們的電腦屏幕為基準點測量
pageX是以我們的文檔（類似絕對定位）的基準點對齊，IE6、7、8 不認識
clientX以可視區域為基準點，類似于固定定位
當出現垂直滾動條，滾動條不在最上邊時，pageY和clientY值是不一樣的

例：點擊跟隨鼠標

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #image{
            width: 80px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var img = document.getElementById("image");
            var leaderX=0,leaderY=0,targetX=0,targetY=0;
            document.onclick = function (event) {
                var event = event||window.event;
                targetX=event.clientX-img.offsetWidth/2;
                targetY=event.clientY-img.offsetHeight/2;
            }

            setInterval(function () {
                leaderX = leaderX+(targetX-leaderX)/10;
                leaderY = leaderY+(targetY-leaderY)/10;
                img.style.left = leaderX+"px";
                img.style.top = leaderY+"px";
            },20);

        }
    </script>
</head>
<body>
    ![](images/img.jpg)
</body>
</html>

盒子內的坐標

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
            margin-left: 100px;
            margin-top: 56px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementsByTagName("div")[0];
            div.onmousemove = function (event) {
                var event = event||window.event;
                var x = event.clientX - this.offsetLeft;
                var y = event.clientY - this.offsetTop;
                this.innerHTML = x+"px"+"<br>"+y+"px";
//                console.dir(event.screenY);
            }
        }
    </script>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

例：淘寶商品圖片放大的效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>taobao放大鏡</title>
    <style type="text/css">
        .box{
            position: relative;
            width: 350px;
            height: 350px;
            /*padding: 10px;*/
            border: 1px solid #ccc;
            /*margin: 100px auto;*/
        }
        img{
            display: block;
        }
        .big{
            position: absolute;
            width: 450px;
            height: 450px;
            top: 0;
            left: 355px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask{
            position: absolute;
            width: 188px;
            height: 188px;
            /*background-color: rgba(255,255,255,.2);*/
            left: 0;
            top: 0;
            background: url("images/mask.png");
            display: none;
            cursor: move;
        }
        .big img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var tb = document.getElementById("taobao");
            var small = tb.children[0];
            var big = tb.children[1];
            var mask = small.children[1];
            var bigImg = big.children[0];
            small.onmouseover = function () {
                big.style.display = "block";
                mask.style.display = "block";
            }
            small.onmouseout = function () {
                big.style.display = "none";
                mask.style.display = "none";
            }
            small.onmousemove = function (event) {
                var event = event||window.event;
                var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
                var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
                //邊界檢測
                x = x<=0?0:x;
                y = y<=0?0:y;
                var maxWidth = small.offsetWidth-mask.offsetWidth;
                var maxHeight = small.offsetHeight-mask.offsetHeight;//2是2個px的邊框

                x = x>=maxWidth?maxWidth:x;
                y = y>=maxHeight?maxHeight:y;

                mask.style.left = x+"px";
                mask.style.top = y+"px";
                //計算大盒子與小盒子的比率scale
                //在小盒子中每移動1px,那么在大盒子中移動scale*1px;
                //大圖的寬高為800
                var scale = 800/small.offsetWidth;
                bigImg.style.left = -x*scale+"px";
                bigImg.style.top = -y*scale+"px";
            }
        }
    </script>
</head>
<body>
<div class="box" id="taobao">
    <div class="small">
        ![](images/001.jpg)
        <div class="mask"></div>
    </div>
    <div class="big">
        ![](images/0001.jpg)
    </div>
</div>
</body>
</html>

常用事件

onmouseover      onmouseout   onclick

onmousemove當鼠標移動的時候就是說，鼠標移動一像素就會執行的事件

div.onmousemove = function() { 語句 }

當鼠標再div 身上移動的時候，就會執行。

div.onmouseover和div.onmousemove區別
他們相同點都是經過 div 才會觸發
div.onmouseover 只觸發一次
div.onmousemove 每移動一像素，就會觸發一次
onmouseup 當鼠標彈起
onmousedown 當鼠標按下

拖動

拖動原理 == 鼠標按下接著移動鼠標。

bar.onmousedown = function(){
            document.onmousemove = function(){ 
            }
}

當我們按下鼠標的時候，就要記錄當前鼠標的位置 - 大盒子的位置
算出 bar 當前在大盒子內的距離。

例：可拖拽的進度條

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 400px;
            height: 8px;
            background-color: #ccc;
            margin: 100px auto;
            position: relative;
        }
        .bar{
            width: 10px;
            height: 20px;
            background-color: #369;
            position: absolute;
            left: 0;
            top: -6px;
            cursor: pointer;
        }
        .mask{
            width: 10px;
            height: 8px;
            background-color: #369;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var scroll = document.getElementById("scroll");
            var bar = scroll.children[0];
            var mask = scroll.children[1];
            var msg = document.getElementById("msg");
            var that = null;
            bar.onmousedown = function (event) {
                var event = event||window.event;
                that = this;
                var leftVal = event.clientX-this.offsetLeft;
                document.onmousemove = function (event) {
                    var event = event||window.event;
                    var lVal = event.clientX - leftVal;
                    if(lVal<0){
                        lVal = 0;
                    }else if(lVal>=scroll.offsetWidth-10){
                        lVal = scroll.offsetWidth-10;
                    }
                    that.style.left = lVal+"px";
                    mask.style.width = lVal+"px";
                    msg.innerHTML = "當前進度："+parseInt(lVal/(scroll.offsetWidth-10)*100)+"%";
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
    <div class="scroll" id="scroll">
        <div class="bar"></div>
        <div class="mask"></div>
    </div>
    <span id="msg"></span>
</body>
</html>

防止選擇拖動

我們知道按下鼠標然后拖拽可以選擇文字的。
清除選中的內容，
正常瀏覽器：window.getSelection().removeAllRanges()；
IE6、7、8：document.selection.empty();
兼容所有瀏覽器的寫法：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

例：可拖拽的彈出框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
            height: 42px;
        }
        a{
            text-decoration: none;
        }
        .nav{
            background-color: #036663;
        }
        .nav a{
            margin-left: 24px;
            line-height: 42px;
            color: #fff;
        }
        .d-box{
            width: 400px;
            height: 300px;
            border: 5px solid #eeeeee;
            box-shadow: 2px 2px 2px 2px #999;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            display: none;
        }
        .b-title{
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            color: #fff;
            line-height: 25px;
            cursor: move;
        }
        .b-title a{
            float: right;
            color: #ffffff;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id);}
            var con_box = $("con-alert");
            var close = con_box.getElementsByTagName("a")[0];
            $("m-alert").onclick = function () {
                con_box.style.display = "block";
            }
            close.onclick = function () {
                con_box.style.display = "none";
            }

            function startDrag(current,move){
                current.onmousedown = function (event) {
                    var event = event||window.event;
                    var x = event.clientX - move.offsetLeft - move.offsetWidth/2;
                    var y = event.clientY - move.offsetTop - move.offsetHeight/2;
                    document.onmousemove = function (event) {
                        var event = event||window.event;
                        var left = event.clientX - x;
                        var top = event.clientY - y;
                        move.style.left = left+"px";
                        move.style.top = top+"px";
                        window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
                    }
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                }

            }

            startDrag(con_box.children[0],con_box);

        }
    </script>
</head>
<body>
    <div class="nav">
        <a href="javascript:;" id="m-alert">注冊信息</a>
    </div>
    <div class="d-box" id="con-alert">
        <div class="b-title">注冊信息   (可以拖拽)
            <a href="javascript:;">【關閉】</a>
        </div>
        <div class="d-con">

        </div>
    </div>
</body>
</html>

例：歌詞控件，自定義滾動條

滾動條的高度：容器的高度 / 內容的高度 * 容器的高度
滾動的比率：（內容盒子高度 - 大盒子高度） / (大盒子高度 - 滾動條的高度)
內容的盒子定位top值：（內容盒子高度 - 大盒子高度） / (大盒子高度 - 滾動條的高度) * 滾動條移動的數值

完整代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 250px;
            height: 500px;
            margin: 100px auto;
            background-color: #eee;
            position: relative;
            overflow: hidden;
        }
        .content{
            padding: 5px 20px 5px 5px;
            /*background-color: pink;*/
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
        }
        .scroll{
            width: 20px;
            height: 100%;
            position: absolute;
            background-color: #ccc;
            top: 0;
            right: 0;
        }
        .bar{
            width: 100%;
            height: 10%;
            background-color: #999;
            border-radius: 10px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
//            計算滾動條的長度
//            內容越多，滾動條越短
            function $(id){return document.getElementById(id);}
            var box = $("box");
            var content = box.children[0];
            var scroll = $("scroll");
            var bar =  scroll.children[0];

            var h = box.offsetHeight*box.offsetHeight/content.offsetHeight;

            bar.style.height = h+"px";

            bar.onmousedown = function (event) {
                var event = event||window.event;
                var t = event.clientY - this.offsetTop;
                document.onmousemove = function (event) {
                    var event = event||window.event;
                    var y = event.clientY - t;
                    //上下邊界檢測
                    y = y<0?0:y;
                    var maxH = scroll.offsetHeight - bar.offsetHeight;
                    y = y>maxH?maxH:y;

                    bar.style.top = y+"px";

                    window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
                    //內容的位移比率
                    var scale = (content.offsetHeight - box.offsetHeight)/maxH;
                    var content_top = scale*y;
                    content.style.top = -content_top+"px";

                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }


        }
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="content" id="content">
            看透愛情看透你 (粵語版)<br>
            作曲：陳煒<br>
            填詞：楊語蓮<br>
            演唱：楊語蓮<br>
            歌詞千尋：www.lrcgc.com<br>
            從未奢望真心可永久<br>
            只得放任無言退后<br>
            誰說分手仍然是朋友<br>
            迷茫夢境苦痛你知否<br>
            可嘆心死傾出我所有<br>
            強裝鎮定默默眼淚流<br>
            流水記憶早已經遠走<br>
            斷腸消瘦問這生何求<br>
            無情的世界無情的走<br>
            無聊愛情早已經看透<br>
            尋尋覓覓又添許多愁<br>
            懷著千般失落茫然中跌坐<br>
            無情的世界無情的酒<br>
            飲下這杯愛情無言的詛咒<br>
            忘掉了你忘記曾一起<br>
            看透愛情也看透了你<br>
            可嘆心死傾出我所有<br>
            強裝鎮定默默眼淚流<br>
            流水記憶早已經遠走<br>
            斷腸消瘦問這生何求<br>
            無情的世界無情的走<br>
            無聊愛情早已經看透<br>
            尋尋覓覓又添許多愁<br>
            懷著千般失落茫然中跌坐<br>
            無情的世界無情的酒<br>
            飲下這杯愛情無言的詛咒<br>
            忘掉了你忘記曾一起<br>
            看透愛情也看透了你<br>
            無情的世界無情的走<br>
            無聊愛情早已經看透<br>
            尋尋覓覓又添許多愁<br>
            懷著千般失落茫然中跌坐<br>
            無情的世界無情的酒<br>
            飲下這杯愛情無言的詛咒<br>
            忘掉了你忘記曾一起<br>
            看透愛情也看透了你<br>
            <br><br>
            奔跑吧兄弟<br>
            作詞：譚春梅/張佳彤<br>
            作曲：張佳彤<br>
            演唱：譚春梅<br>
            監制混縮:李程<br>
            發行:天歌數字音樂傳媒<br>
            當我孤獨寂寞的時候<br>
            是你讓我快樂無憂<br>
            當我徘徊無助的時候<br>
            是你伸出溫暖的雙手<br>
            當我病痛降臨的時侯<br>
            是你日夜在為我操勞<br>
            當我痛苦難過的時候<br>
            是你為我種下幸福之花<br>
            奔跑奔跑吧兄弟<br>
            我會一直在你的左右<br>
            奔跑奔跑吧兄弟<br>
            握緊你的拳頭一直往前走<br>
            奔跑奔跑吧兄弟<br>
            我們有福同享有難一起扛<br>
            奔跑奔跑吧兄弟<br>
            你永遠是我們心中的驕傲<br>
            奔跑奔跑吧兄弟<br>
            幸福之花將開滿你我心頭<br>
            奔跑奔跑吧兄弟<br>
            為了我們同一個夢想而努力奮斗<br>
            當我孤獨寂寞的時候<br>
            是你讓我快樂無憂<br>
            當我徘徊無助的時候<br>
            是你伸出溫暖的雙手<br>
            當我病痛降臨的時候<br>
            是你日夜在為我操勞<br>
            當我痛苦難過的時候<br>
            是你為我種下幸福之花<br>
            奔跑奔跑吧兄弟<br>
            我會一直在你的左右<br>
            奔跑奔跑吧兄弟<br>
            握緊你的拳頭一直往前走<br>
            奔跑奔跑吧兄弟<br>
            我們有福同享有難一起扛<br>
            奔跑奔跑吧兄弟<br>
            你永遠是我們心中的驕傲<br>
            奔跑奔跑吧兄弟<br>
            幸福之花將開滿你我心頭<br>
            奔跑奔跑吧兄弟<br>
            為了我們同一個夢想而努力奮斗<br>
            奔跑奔跑吧兄弟<br>
            我會一直在你的左右<br>
            奔跑奔跑吧兄弟<br>
            握緊你的拳頭一直往前走<br>
            奔跑奔跑吧兄弟<br>
            我們有福同享有難一起扛<br>
            奔跑奔跑吧兄弟<br>
            你永遠是我們心中的驕傲<br>
            奔跑奔跑吧兄弟<br>
            幸福之花將開滿你我心頭<br>
            奔跑奔跑吧兄弟<br>
            為了我們同一個夢想而努力奮斗<br>
            為了我們同一個夢想而努力奮斗
        </div>
        <div class="scroll" id="scroll">
            <div class="bar"></div>
        </div>
    </div>
</body>
</html>

最后編輯于：2017.12.08 02:26:39

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,460評論 6贊 538
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,067評論 3贊 423
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 177,467評論 0贊 382
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,468評論 1贊 316
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,184評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,582評論 1贊 325
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,616評論 3贊 444
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,794評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,343評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,096評論 3贊 356
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,291評論 1贊 371
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,863評論 5贊 362
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,513評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,941評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,190評論 1贊 291
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,026評論 3贊 396
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,253評論 2贊 375

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

10_JS的offset家族、事件對象

10_JS的offset家族、事件對象

JS三大系列

offset家族

offsetWidth、offsetHeight

offsetLeft、offsetTop

offsetParent

offsetTop、style.top 的區別

事件對象

event 常見屬性

pageX 、clientX 、screenX 區別

盒子內的坐標

常用事件

拖動

防止選擇拖動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

10_JS的offset家族、事件對象

JS三大系列

offset家族

offsetWidth、offsetHeight

offsetLeft、offsetTop

offsetParent

offsetTop、style.top 的區別

事件對象

event 常見屬性

pageX 、clientX 、screenX 區別

盒子內的坐標

常用事件

拖動

防止選擇拖動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

10_JS的offset家族、事件對象

offsetWidth、offsetHeight

offsetLeft、offsetTop

pageX 、clientX 、screenX 區別