JS(8)

桓风史

2023-12-01

复习

根据位置返回字符 asdfg.charAt(3)—f
根据字符返回位置 asdfgg.indexOf(“f”) 3 从前面索引
lastIndexOf(“g”) 5 从后面索引
slice(起始位置，[ 结束位置 ])
slice(3) 从第3个开始选 slice(3,6) 从索引号3开始取，数6个但是从索引号0 开始数
var arr = [1,3,5,7];
asdfghidk fgh
substr(3,6) 从3开始选从第三个开始数往后数 6个 fghidk
toFixed(2)
缓动公式 :
leader = leader + (target - leader) / 10

offset家族

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 因为这种只能得到行内的数值

offsetLeft offsetTop

返回距离上级盒子（最近的带有定位）左边的位置

如果父级都没有定位则以body 为准
这里的父级指的是所有上一级不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。

offsetLeft 从父级的padding 开始算父亲的border 不算
总结一下： 就是子盒子到定位的父盒子边框到边框的距离

offsetParent

返回改对象的父级（带有定位）不一定是最近的上一级
前面学过一个返回父亲(亲的) parentNode 有所区别

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

var son = document.getElementById("son");
//alert(son.parentNode.id);
alert(son.offsetParent.tagName);  // tagName标签的名字

offsetTop style.top 的区别

一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有 left top right

二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
style.left = 300px parseInt（300px）结果 300
parseInt（style.left） + parseInt（style.left）
三、offsetTop 只读，而 style.top 可读写。

四、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
五、最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

事件对象

我们学过一些事件 : onmouseover onmouseout onclick .....
btn.onclick = function(event) { 语句 }
event 单词翻译过来事件的意思
event 就是事件的对象指向的是事件是 onclick
再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 window.event
所以我们采取兼容性的写法：
var event = event || window.event;

event 常见属性

属性作用

data 返回拖拽对象的URL字符串（dragDrop）
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置（ie无）
pageY 光标相对于该网页的垂直位置（ie无）
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置（当前可见区域）
clientY 光标相对于该网页的垂直位置

pageX clientX screenX 区别

screenX screenY
是以我们的电脑屏幕为基准点测量

pageX pageY
以我们的文档（绝对定位）的基准点对齐
ie678不认识

clientX clientY
以可视区域为基准点类似于固定定位

常用事件

onmouseover onmouseout onclick
onmousemove当鼠标移动的时候就是说，鼠标移动一像素就会执行的事件
div.onmousemove = function() { 语句 }
当鼠标再div 身上移动的时候，就会执行。
得到在某个盒子内的坐标：

div.onmouseover 和div.onmousemove区别
他们相同点都是经过div才会触发
div.onmouseover 只触发一次
div.onmousemove 每移动一像素，就会触发一次

onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候
1.拖动原理 == 鼠标按下,接着移动鼠标。

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

2.当我们按下鼠标的时候，就要记录当前鼠标的位置 - 大盒子的位置
算出 bar 当前在大盒子内的距离。

防止选择拖动

我们知道按下鼠标然后拖拽可以选择文字的。
清除选中的内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

案例

了解offsetWidth,offsetHeight,offsetLeft,offsetParent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offsetParent</title>
    <style>
        *{margin: 0; padding: 0;}
        #yeye {
            position: relative;
            overflow: hidden;
            background-color: orange;
            width: 600px;
            height: 600px;
            padding: 100px;
        }
        #father {
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 100px;
            margin-left: 30px;
        }
        #son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div id="yeye">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
</body>
</html>
<script>
    var son = document.getElementById("son");
    //返回距离上级盒子（最近的带有定位）左边的位置--30px(margin-left)+100px(padding)
    //就是子盒子到定位的父盒子边框到边框的距离
    console.log(son.offsetLeft);
    alert(son.offsetParent.tagName);//tarName标签的名字
</script>

时间对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style>
        body {
            height: 2000px;
        }
    </style>

</head>
<body>

</body>
</html>
<script>
    document.onclick = function (event) {
        var event = event || window.event;
        console.log(event.clientY);
        //这里是获得光标相对于该网页的垂直位置（当前可见区域）
        console.log(event.pageX);//光标相对于该网页的水平位置（ie无）
        console.log(event.screenY);//光标相对于该屏幕的垂直位置
    }
</script>

offsetleft和style.left的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offsetleft和style.left的区别</title>
    <style>
        #demo {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="demo" style="width: 300px"></div>
</body>
</html>
<script>
    var demo = document.getElementById("demo");
    console.log(demo.style.width);
    console.log(demo.offsetWidth);
    demo.offsetWidth = 500;//可以得到值，但是不能更改值
    demo.style.width = "500px";//可以得到行内的值，也可以更改值
</script>

在一个盒子内的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在一个盒子内的坐标</title>
    <style>
        *{margin: 0;padding: 0;}
        .demo {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>
<script>
    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" + y + "px";
    }
</script>

拖动水平条的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动水平条的实例</title>
    <style>
        * {margin: 0;padding: 0;}
        .scroll {
            width: 400px;
            height: 8px;
            background-color: #ccc;
            margin: 100px;
            position: relative;
        }
        .bar {
            width: 10px;
            height: 22px;
            background-color: #369;
            position: absolute;
            top: -7px;
            cursor: pointer;
        }
        .mask {
            width: 0;
            height: 100%;
            background-color: #369;
            top: 0;
            left: 0;
        }
        #demo {
            margin-left: 240px;
        }
    </style>
</head>
<body>
<div class="scroll" id="scrollBar">
    <div class="bar"></div>
    <div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
    var scrollBar = document.getElementById("scrollBar");
    var bar = scrollBar.children[0];
    var mask = scrollBar.children[1];
    var demo = document.getElementById("demo");

    bar.onmousedown = function(event) {
        var event = event || window.event;
        var leftVal = event.clientX - this.offsetLeft;

        var that = this;
        document.onmousemove = function(event) {
            var event = event || window.event;
            that.style.left = event.clientX - leftVal + 'px';
            var val = parseInt(that.style.left);
            if(val < 0){
                that.style.left = 0;
            }else if(val > 390){
                that.style.left = "390px";
            }
            mask.style.width = that.style.left;// 遮盖盒子的宽度
            //计算百分比
            demo.innerHTML =　"has gone   "+ parseInt(parseInt(that.style.left)/390*100) + "%";
            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;}
        ul {list-style:none;}
        body {
            background-color: #000;
        }
        .nav {
            width: 800px;
            height: 42px;
            background: url("images/rss.png") no-repeat right center #fff;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }
        .cloud {
            width: 83px;
            height: 42px;
            position: absolute;
            top: 0;
            left: 0;
            background:  url(images/cloud.gif)  no-repeat;
        }
        .nav ul {
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav li {
            float: left;
            width: 83px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav" id="nav">
        <span class="cloud" id="cloud"></span>
        <ul>
            <li>首页新闻</li>
            <li>师资力量</li>
            <li>活动策划</li>
            <li>企业文化</li>
            <li>招聘信息</li>
            <li>公司介绍</li>
            <li>上海校区</li>
            <li>广州校区</li>
        </ul>
    </div>
</body>
</html>
<script>
    var cloud = document.getElementById("cloud");
    var nav = document.getElementById("nav");
    var lis = nav.children[1].children;
    var current = 0;//用于存放点击时候的offsetLeft
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            target = this.offsetLeft;
        }
        lis[i].onmouseout = function() {
            target = current;
        }
        lis[i].onclick = function() {
            current = this.offsetLeft;
        }
    }
    //缓动公式
    var leader = 0,target = 0;
    setInterval(function(){
        leader = leader +(target - leader)/10;
        cloud.style.left = leader + "px";
    },10)

</script>

点击跟随鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击跟随鼠标</title>
    <style>
        #image {
            width: 99px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<img src="img.jpg" alt="" id="image">
</body>
</html>
<script>
    var image = document.getElementById("image");
    document.onclick = function (event) {
        var event = event || window.event;
        targetX = event.clientX - image.offsetWidth / 2;
        targetY = event.clientY - image.offsetHeight / 2;
    }
    var leaderX=0,leaderY=0,targetX=0,targetY=0;
    setInterval(function() {
        leaderX = leaderX + (targetX - leaderX) / 10;
        leaderY = leaderY + (targetY - leaderY) / 10;
        image.style.left = leaderX + "px";
        image.style.top = leaderY + "px";
     },10)
</script>

鼠标放大特效图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标放大特效图</title>
    <style>
        *{margin: 0;padding: 0;}
        img {
            vertical-align: top;
        }
        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 450px;
            height: 450px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="fdj">
        <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 fdj = document.getElementById("fdj");  // 获得最大的盒子
    var small = fdj.children[0];  // 获得small 小图片 350盒子
    var big = fdj.children[1];  // 获得 大图片 800 盒子
    var mask = small.children[1];  // 小的黄色盒子
    var bigImage = big.children[0]; // 大盒子里面的图片
    small.onmouseover = function() {   // 鼠标经过显示出他们
        mask.style.display = "block";
        big.style.display = "block";
    }
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //  鼠标在small 内移动
    var x = 0;
    var y = 0;
    small.onmousemove = function(event) {
         var event = event || window.event;
         x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 在某个盒子内的坐标
         y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
         console.log("x="+x);
         console.log("y="+y);
         if(x < 0)
         {
             x = 0;
         }
         else if(x > small.offsetWidth - mask.offsetWidth)
         {
             x = small.offsetWidth - mask.offsetWidth;
         }
         if(y<0)
         {
            y = 0;
         }
         else if(y > small.offsetHeight - mask.offsetHeight)
         {
             y = small.offsetHeight - mask.offsetHeight;
         }
         mask.style.left = x + "px";
         mask.style.top = y + "px";

         bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
         bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";

    }
</script>