JS(9)_9。ls冫,。∮台g少js:了。。:丁。-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/78254109

复习

offset 自己的偏移
offsetWidth 得到自己的宽度
offsetHeight
构成： width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221

offsetLeft offsetTop

div.offsetLeft
得到距离这个 div 最近的带有定位的父盒子左边距离

offsetParent 返回自己的父亲元素（带有定位的）

parentNode    这个返回亲父亲 不管父亲是否带有定位

style.top offsetTop

offsetTop   只读 只可以得到结果但是不能赋值  
style.top   能得到 （行内式 ）但是可以给值   
style.top   得到的是  25px    
offsetTop   得到的是 25

事件对象 event

div.onclick = function(event) { } event 是点击的事件对象
event 集合点击事件的相关信息
pageX 文档的参考点
clientX 可视区域
ScreenX 屏幕

常用事件

   onmouseover     经过   
   onmouseout      离开
   onmousemove     鼠标移动  
   var num = 0;
  div.onmouseover = function() { num++;  console.log(num))}  1 
  div.onmousemove = function() { num++;  console.log(num))}
   onmousedown   按下鼠标 
   onmouseup      弹起鼠标            
   拖拽：  先按下鼠标 然后  移动鼠标    
   bar.onmousedown = funtion() {
           document.onmousemove = function() {} 
   }

最大window对象—document对象

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //ie

模拟垂直滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟垂直滚动条</title>
    <style>
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
        }
        .content {
            height: auto;
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .scroll {
            width: 18px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #eee;
        }
        .bar {
            width: 100%;
            height: 100px;
            background-color: red;
            cursor: pointer;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="content">
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

    </div>
    <div class="scroll">
        <div class="bar"></div>
    </div>
</div>
</body>
</html>
<script>
    //获取相应的元素
    var box = document.getElementById("box");
    var content = box.children[0];
    var scroll= box.children[1];
    var bar = scroll.children[0];
    //首先要得到红色滚动条的高度--内容越多，滚动条就越短。
    //比例公式：滚动条的高度/容器的高度=容器的高度/内容的高度（内容越多，滚动条就越短）
    //得到滚动条的高度=（容器的高度/内容的高度）* 容器的高度
    var barHeight = box.offsetHeight/content.offsetHeight*box.offsetHeight;
    bar.style.height = barHeight+"px";
    //拖动红色滚动条
    startScroll(bar,content);
    function startScroll(obj,target) {
        obj.onmousedown = function(event) {
            var event = event || window.event;
            var t = event.clientY - this.offsetTop;
            //event.clientY是event（即点击的鼠标）距离页面的顶部的距离
            //this.offsetTop是滚动条自己的顶部的距离
            // console.log(t);
            var that = this; //将bar对象给that对象
            document.onmousemove = function(event) {
                var event = event || window.event;
                var barTop = event.clientY - t ;//红色滚动条移动的距离
                // console.log("barTop="+barTop);
                // console.log("that.offsetTop="+that.offsetTop);
                //又一个比例关系
// 内容盒子移动距离/红色滚动条移动距离=（内容盒子高度-大盒子高度）/（大盒子高度-红色盒子的高度）
                var contentTop = (target.offsetHeight - target.parentNode.offsetHeight)/(target.parentNode.offsetHeight - that.offsetHeight)*barTop;
                //限制红色盒子溢出
                if(barTop < 0){
                    barTop = 0;
                }else if (barTop>target.parentNode.offsetHeight - that.offsetHeight) {
                    barTop = target.parentNode.offsetHeight - that.offsetHeight;
                }
                else {
                    target.style.top = - contentTop + "px";//往上走是负值
                }
                that.style.top = barTop + "px";
                window.getSelection ? window.getSelection().removeAllRanges():
                document.selection.empty();
            }
        }
        document.onmouseup = function() {
            document.onmousemove = null;
        }
    }
</script>

这里写图片描述

Html基本结构访问方法

文档是 document
html body head
document.head
document.body
document.title
没有 document.html 取而代之的是 document.documentElement;

scroll家族

Offset 自己的偏移
scroll 滚动的

scrollTop scrollLeft

scrollTop 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

怎么得到scrollTop

我们学习一个事件：页面滚动效果
window.onscroll = function() { 页面滚动语句 }
谷歌浏览器和没有声明 DTD <DOCTYPE >：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和最新浏览器都认识
window.pageXOffset; pageYOffset （scrollTop）
兼容性写法：

 var scrollTop = window.pageYOffset || document.documentElement.scrollTop|| document.body.scrollTop ||0;

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。JSON实际上就是JavaScript
Json很像我们学过的样式条；
var myjson={k:v,k:v,k:v…} 键值对 key: value color: red;
Json一般就是被当做一个配置单用；
我们的网站，可以注册会员：
姓名：李白
年龄: 500
职业： it
xml

json 对象结构书写：

var json = { key: value， key1:value }
var json = {name: “李白”,age: 15}

使用：
json名.属性—json.name —李白

var json1 = {name :"刘德华",age: 55};
console.log(json1.name);  // 输出名字  刘德华
console.log(json1.age);  // 输出年龄  55

判断是不是怪异模式的浏览器

document.compatMode == "CSS1Compat"

document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写

scrollTo(x,y)

window.scrollTo(15,15);
方法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos);
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标
因为我们的网页大部分都没有水平滚动条，所以，这个x 不太常用。

案例

拖拽案例

<!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: 50%;
            left: 50%;
            margin-top: -155px;
            margin-left: -205px;
        }
        .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");
    startDrop(drop,box);//鼠标放在drop,移动的是box
    function startDrop(current,move) {
        current.onmousedown = function(event) {
            var event = event || window.event;
            var x = event.clientX - move.offsetLeft - 205;//记录当前盒子的x位置
            var y = event.clientY - move.offsetTop - 155;//记录当前盒子的y位置
            document.onmousemove = function(event) {
                var event = event || window.event;
                move.style.left = event.clientX - x +"px";
                move.style.top = event.clientY - y +"px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }
        }
        document.onmouseup = function() { //鼠标弹起后，鼠标继续移动不应该操作
            document.onmousemove = null;
        }
    }
</script>

固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style>
        *{margin: 0;padding: 0;}
        img{
            vertical-align: top;
        }
        .main{
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="top" id="top">
    <img src="images/top.png" alt="">
</div>
<div class="nav" id="Q-nav">
    <img src="images/nav.png" alt="">
</div>
<div class="main">
    <img src="images/main.png" alt="">
</div>
</body>
</html>
<script src="my.js" type="text/javascript"></script>
<script>
    var nav = $("Q-nav");
    var navTop = nav.offsetTop;//得到导航栏距离顶部的距离
    window.onscroll = function () {
        if (scroll().top>=navTop) {
            nav.className = "nav fixed";
        }
        else{
            nav.className = "nav";
        }
    }
</script>

两侧跟随的广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两侧跟随的广告</title>
    <style>
        *{margin: 0;padding: 0;}
        .pic{
            position: absolute;
            left: 0;
            top: 50px;
            z-index: 1;
        }
        .header {
            position: relative;
            left: 50px;
        }
        .main{
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;
            position: relative;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var pic = $("pic");
            var leader = 0;
            var target = 0;
            var timer = null; //定时器
            var top = pic.offsetTop;//50
            window.onscroll = function() {
                clearInterval(timer);
                target = scroll().top + top;//把最新的scrolltop给target
                timer = setInterval(function() {
                    leader = leader +(target - leader) /10;
                    pic.style.top = leader +'px';
                },30)
            }
        }
    </script>
</head>
<body>
<img src="images/aside.jpg" alt="" class="pic" id="pic"/>
<div class="header">
    <img src="images/top.png" alt="">
    <img src="images/nav.png" alt="">
</div>
<div class="main">
    <img src="images/main.png" alt="">
</div>
</body>
</html>

返回头部的小火箭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回头部的小火箭</title>
    <style>
        body {
            width: 2000px;
        }
        .top{
            position: fixed;
            right: 50px;
            bottom: 100px;
            display: none;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var goTop = $("gotop");
            window.onscroll = function(){
                scroll().top>0?show(goTop) : hide(goTop);//如果大于0
                leader = scroll().top;
                console.log(scroll().top);
            }
        var leader = 0,target = 0,timer = null;
        //leader起始位置，target目标位置
        goTop.onclick = function() {
            target = 0;
            timer = setInterval(function(){
                leader = leader +(target - leader)/10;
                window.scrollTo(0,leader);//去往页面中的某个位置
                if(leader == target){
                    clearInterval(timer);
                }
            }
            ,10);
        }
    }
    </script>
</head>
<body>
<div id="gotop" class="top">
    <img src="images/Top.jpg" alt=""/>
</div>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
</body>
</html>

屏幕滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕滑动效果</title>
    <style>
        ul,ol {
            list-style-type: none;
        }
        *{margin: 0;padding: 0;}
        html,body {
            width: 100%;
            height: 100%;
        }
        #ul {
            width: 100%;
            height: 100%;
        }
        ul li{
            width: 100%;
            height: 100%;
        }
        #ol {
            position: fixed;
            top: 0;
            left: 50px;
        }
        #ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var ulBox = $("ul");
            var ulBoxLi = ulBox.children;
            var olBox = $("ol");
            var olBoxLi = olBox.children;
            var bgColor = ["pink","purple","orange","blue","green"];
            var leader = 0,target = 0,timer = null;
            for (var i = 0; i < ulBoxLi.length; i++) {
                ulBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].index = i;
                olBoxLi[i].onclick = function() {
                    clearInterval(timer);
                    target = ulBoxLi[this.index].offsetTop;
                    timer = setInterval(function(){
                        leader = leader +(target - leader)/10;
                        window.scrollTo(0,leader);//屏幕下滑
                    },30)
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul">
    <li>首先</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ul>
<ol id="ol">
    <li>首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ol>
</body>
</html>