前端js特效笔记

最新推荐文章于 2023-07-05 17:56:50 发布

liguangjiehao

最新推荐文章于 2023-07-05 17:56:50 发布

阅读量283

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/u012360634/article/details/78909822

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Offset家族: offsetWidth和 offsetHight 以及 offsetLeft和 offsetTop以及 offsetParent共同组成了offset家族
offsetWidth和offsetHight，能够获取元素节点的宽和高
offset宽/高 = 盒子自身的宽/高 + padding +border
(1)offsetWidth = width+padding+border
(2)offsetHeight = Height+padding+border
offsetLeft和offsetTop(检测距离父盒子有定位的左/上面的距离)
(1)如果父级都没有定位则以body为准
(2)offsetLeft 从父亲的padding 开始算,父亲的border 不算
(3)在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

3.offsetParent:检测父系盒子中.带有定位.的父盒子节点
(1)返回改对象的父级:如果当前元素的父级元素没有进行CSS定位（position为absolute或relative，fixed），offsetParent为body
(2)如果当前元素的父级元素中有CSS定位（position为absolute或relative，fixed），offsetParent取最近的那个父级元素。

4.定时器

btn.onclick = function () {
   setInterval(function () {
        console.log(parseInt(div.style.left));
        div.style.left = div.offsetLeft + 10 + "px";
   },10);
}

5.动画的封装
(1)清除定时器

    btnArr[0].onclick = function () {
        timer = setInterval(function () {
            box2.style.left = box2.offsetLeft + 2 +"px";
            if(box2.offsetLeft === 200){
                clearInterval(timer)
            }
        },100);
    }

(2)简单封装

  function animate(target){
        //要用定时器，先清除定时器
        clearInterval(timer);
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        //目标值如果大于当前值取正，目标值如果小于当前值取负
        var speed = target>box2.offsetLeft?10:-10;
        timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - box2.offsetLeft;
            box2.style.left = box2.offsetLeft + speed + "px";
            //目标值和当前值只差如果小于步长，那么就不能在前进了
            //因为步长有正有负，所有转换成绝对值来比较
            if(Math.abs(val)<Math.abs(speed)){
                box2.style.left = target + "px";
                clearInterval(timer);
            }
        },30)
    }

(3)可多个节点调用

function animate(ele,target){
        //要用定时器，先清除定时器
        //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
        //而定时器本身讲成为盒子的一个属性
        clearInterval(ele.timer);
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        //目标值如果大于当前值取正，目标值如果小于当前值取负
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目标值和当前值只差如果小于步长，那么就不能在前进了
            //因为步长有正有负，所有转换成绝对值来比较
            if(Math.abs(val)<Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30)
    }

6.滑动焦点图–轮播图

<div class="inner" id="inner">
       <ul>
          <li><img src="images/01.jpg" alt=""/></li>
          <li><img src="images/02.jpg" alt=""/></li>
          <li><img src="images/03.jpg" alt=""/></li>
          <li><img src="images/04.jpg" alt=""/></li>
          <li><img src="images/05.jpg" alt=""/></li>
        </ul>
     <div class="square">
          <span class="current">1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
     </div>
</div>
       ul {
            left: -100px;
            width: 500%;
            list-style: none;
            position: absolute;
            left: 0;
        }
        li {
            float: left;
        }

.next #right {
    right: 5px;
    left: auto;
 }

8.透明的：opacity:0.3;

9.鼠标小手：cursor:pointer;

10.兼容性问题

 //1.获取事件源及相关元素。（老三步）
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;

11.轮播图

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单焦点图</title>
    <style>
        *{ padding:0; margin:0; list-style:none; border:0;}
        .box {
            width: 500px;
            height: 200px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #cccccc;
            position: relative;
        }
        .inner {
            width: 500px;
            height: 200px;
            overflow:hidden;
            position: absolute;
        }
        ol {
            float: left;
            position: absolute;
            right: 10px;
            bottom:10px;
            line-height:20px;
            text-align:center;
        }
        ol li{
            float:left;
            width:20px;
            height:20px;
            background:#fff;
            border:1px solid #ccc;
            margin-left:10px;
            cursor:pointer;
        }
        li.current {
            background:yellow;
        }
        .inner ul {
            position: absolute;
            left: 0;
            width: 600%;
            height: 200px;
            list-style: none;
        }
        .inner ul li {
            float: left;
        }
        .next {
            display: none;
        }
        .next span {
            top:50%;
            left:5px;
            margin-top: -20px;
            position: absolute;
            display: inline-block;
            width: 40px;
            height: 40px;
            float: left;
            line-height: 40px;
            text-align: center;
            font-family:'黑体';
            font-size:30px;
            font-weight:bold;
            color:#fff;
            opacity:0.3;
            border:1px solid #fff;
            cursor:pointer;
            background:#000;
        }
        .next #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <ul>
                <li><img src="images/temp/1.jpg" width="500" height="200" /></li>
                <li><img src="images/temp/2.jpg" width="500" height="200" /></li>
                <li><img src="images/temp/3.jpg" width="500" height="200" /></li>
                <li><img src="images/temp/4.jpg" width="500" height="200" /></li>
                <li><img src="images/temp/5.jpg" width="500" height="200" /></li>
            </ul>
        </div>
        <ol class="point">
        </ol>
        <div class="next">
            <span><</span>
            <span id="right">></span>
        </div>
    </div>
<script>
    //1.获取事件源和相关元素
    var box = document.getElementsByClassName("box")[0];
    var screen = box.firstElementChild || box.firstChild;
    //获取显示宽度
    var imgWidth = screen.offsetWidth ;
    var ul = screen.firstElementChild || screen.firstChild;
    var ol = box.children[1];
    var next = box.lastElementChild || box.lastChild;
    //左右按钮数组
    var nextArr = next.children;

    //2.复制第一张图片所在的li，添加到ul的最后面
    var newImgLi = ul.children[0].cloneNode(true);
    ul.appendChild(newImgLi);
    //3.动态添加指示器
    for(var i =0 ;i<ul.children.length-1;i++){
        //创建一个节点
        var olNewLi = document.createElement("li");
        olNewLi.innerHTML = i+1;
        ol.appendChild(olNewLi);
    }
    //指示器数组
    var olLiArr = ol.children;
    //默认第一个
    olLiArr[0].className = "current";

    //4.放在指示器上切换图片,为每一个定义事件
    for(var i = 0 ; i < olLiArr.length; i ++){
        //自定义属性，把属性值绑定到元素的index属性上，方便使用
        olLiArr[i].index = i ;
        olLiArr[i].onmouseover = function () {
            //清除其他指示器上的属性
            for(var j = 0 ; j < olLiArr.length; j ++){
                olLiArr[j].className = "";
            }
            this.className = "current";
            animate(ul,-this.index*imgWidth);


        }
    }
    //5.添加计时器
    var timer = setInterval(autoPlay,2000);
    var point = 0 ;  //指示器下标
    var key = 0 ; //图片下标

    //向右移动图片
    function autoPlay() {
        point ++ ;
        if(point>olLiArr.length-1){
            point = 0 ;
        }
        //清除其他计时器中的样式
        for(var z=0; z<olLiArr.length;z++){
            olLiArr[z].className = "";
        }
        olLiArr[point].className = "current";
        key++;
        if(key>olLiArr.length){
            //立即跳到第一张
            //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
            ul.style.left = 0;
            key = 1;
        }
        animate(ul,-key*imgWidth);
    }

    //7.鼠标放上去清楚定时器，显示左右按钮，移开后开启定时器
    box.onmouseover = function () {
        next.style.display = "block";
        clearInterval(timer);
    }
    box.onmouseout = function () {
        next.style.display = "none";
        timer = setInterval(autoPlay,1000);
    }

    //8. 左右按钮滑动
    //向左
    nextArr[0].onclick = function () {
        point -- ;
        if(point<0){
            point = 4 ;
        }
        //清除其他计时器中的样式
        for(var z=0; z<olLiArr.length;z++){
            olLiArr[z].className = "";
        }
        olLiArr[point].className = "current";
       //通过控制key的自增来模拟图片的索引值，然后移动ul
        key--;
        if(key<0){
            //立即跳到最后一张，而不是慢慢滑动到
            //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
            ul.style.left = - olLiArr.length * imgWidth + "px";
            key = olLiArr.length-1;
        }
        animate(ul,-key*imgWidth);
    }

    //先右
    nextArr[1].onclick = function () {
       //右侧的和定时器一模一样
        autoPlay();
    }

    //切换图片 target : 目标值位置
    function animate(ele, target) {
        //清除定时器
        clearInterval(ele.timer);
        //定义速度
        var speed = target>ele.offsetLeft?10:-10;
        //定义定时器
        ele.timer = setInterval(function () {
            //当前距离与目标值之差
            var val = target - ele.offsetLeft;
            //当前left加上速度
            ele.style.left = ele.offsetLeft + speed + "px";
            //停止条件  当前距离与目标值之差
            if(Math.abs(val)<Math.abs(speed)){
                //直接跳转到目标值
                ele.style.left = target + "px";  //最终一步跳到目标值
                //完成清楚定时器
                clearInterval(ele.timer);
            }
        }, 10)

    }

</script>
</body>
</html>

二.缓动动画
1.三个函数
(1)Math.ceil() 向上取整
(2)Math.floor() 向下取整
(3)Math.round(); 四舍五入

2.缓动动画原理
//盒子位置 = 盒子本身位置+（目标位置-盒子本身位置）/ 10；

leader=leader+(target-leader)/10;

3.缓动动画

    btn.onclick = function () {
        setInterval(function () {
            //步长是目标位置和盒子自身位置的十分之一
            //动画原理：盒子未来的位置 = 盒子当前的位置+步长
            //越来越快到越来越慢
            div.style.left = div.offsetLeft + (400-div.offsetLeft)/10 + "px";
        },30);
    }

4.缓动动画简单封装

    btn.onclick = function () {
        //要用定时器，先清定时器
        clearInterval(timer);
        timer = setInterval(function () {
            var target = 0;
            //缓动。如何缓动呢？步长越来越小....
            //   步长用目标位置和盒子自身位置的十分之一
            //最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。
            var step = (target - div.offsetLeft)/10;
            //每次获取步长都向上取整，这种情况就包含step<0.4的情况
            //拓展：差值大于0的时候，向上取整，小于0的时候向下取整。
//            step = Math.ceil(step);
            step = step>0?Math.ceil(step):Math.floor(step);
//            step = target>div.offsetLeft?Math.ceil(step):Math.floor(step);
            //动画原理：盒子未来的位置 = 盒子当前的位置+步长
            div.style.left = div.offsetLeft + step + "px";
            //跳出条件：目标位置-当前位置的绝对值，小于步长
            console.log(1);
            if(Math.abs(0-div.offsetLeft)<Math.abs(step)){
                div.style.left = 0+"px";
                clearInterval(timer);
            }
        },30);
    }

5.offsetLeft和style.left的值的获取问题
(1)offsetLeft : 获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整
(2)Style.left : 获取的是具体值。（赋值的时候也是直接赋值）

6.缓动动画封装

    //缓动动画封装
    function animate(ele,target) {
        //要用定时器，先清定时器
        //一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {
            //获取步长
            //步长应该是越来越小的，缓动的算法。
            var step = (target-ele.offsetLeft)/10;
            //对步长进行二次加工(大于0向上取整,小于0项下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            //检测缓动动画有没有停止
            console.log(1);
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                //处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30);
    }

7.筋斗云demo
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: rgba(0, 0, 0, 0.8);
        }
        .box {
            width: 800px;
            height: 42px;
            background: #fff url("images/wifi.png") right center no-repeat;
            margin: 200px auto;
            border-radius: 8px;
            position: relative;
        }
        ul {
            list-style: none;
            position: relative;
        }
        li {
            float: left;
            width: 83px;
            height: 42px;
            text-align: center;
            font: 500 16px/42px "simsun";
            cursor: pointer;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat;
        }
    </style>
    <script>
        window.onload = function () {
            //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
            //需求2：鼠标点击那个li记录该li标签，移开的时候span回到该记录的li标签上。
            //步骤：
            //1.老三步
            //2.计数器


            //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
            //1.老三步
            //获取事件源 ，一次移动的宽度单位
            var liArr = document.getElementsByTagName("li");
            var liWidth = liArr[0].offsetWidth;
            var span = document.getElementsByTagName("span")[0];
            //计数器
            var count = 0; //记录点击的位置


            //for循环绑定事件  //绑定事件,为每个li绑定事件
            for(var i=0;i<liArr.length;i++){
                //自定义属性，然后绑定index属性为索引值  方便后面使用  this.index
                liArr[i].index = i;
                //鼠标进入事件
                liArr[i].onmouseover = function () {
                    //让span运动到该li的索引值位置
                    //图片运动需要封装的方法
                    animate(span,this.index*liWidth);
                }
                //鼠标移开
                liArr[i].onmouseout = function () {
                    //让span运动到该li的索引值位置
                    //图片运动需要封装的方法
                    animate(span,count*liWidth);
                }
                //点击事件，记录功能
                liArr[i].onclick = function () {
                    //需要一个计数器，每次点击以后把所以只记录下来
                    //因为onmouseout事件要用到这个计数器，所以应该是一个全局变量
                    count = this.index;
                    animate(span,count*liWidth);
                }

            }

            //缓动动画封装
            function animate(ele,target) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    //步长
                    var step = (target-ele.offsetLeft)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    ele.style.left = ele.offsetLeft + step + "px";
                    console.log(1);
                    if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
                        //直接跳到目标值
                        ele.style.left = target + "px";
                        clearInterval(ele.timer);
                    }
                },18);
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <span></span>
        <ul>
            <li>首页新闻</li>
            <li>活动策划</li>
            <li>师资力量</li>
            <li>企业文化</li>
            <li>招聘信息</li>
            <li>公司简介</li>
            <li>上海校区</li>
            <li>广州校区</li>
        </ul>
    </div>
</body>
</html>

二.Scroll家族组成
1.ScrollWidth和scrollHeight（不包括border）
(1)检测盒子的宽高。（调用者：节点元素。属性。）
(2)盒子内容的宽高。（如果有内容超出了，显示内容的高度）
(3)scrollWidth和scrollHeight不包括border和margin
(4)scrollWidth = width + padding;

2.滑动窗口

 window.onscroll = function () {
          console.log(1);
      }

3.scrollTop和scrollLeft
(1)网页，被浏览器遮挡的头部和左边部分
(2)兼容写法

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

4.获取title、body、head、html标签
(1)document.title — 文档标题；
(2)document.head — 文档的头标签
(3)document.body — 文档的body标签
(4)document.documentElement — 这个很重要
它表示文档的html标签，也就是说，
基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement

5.封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop
封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft

  function scroll(){
              //如果这个属性存在，那么返回值应该是0-无穷大
              //如果没有返回值是undefined；
              //只要判断不是undefined就可以调用此方法
              //练习使用此种封装
              if(window.pageYOffset !== undefined){
  //                var json = {
  //                    "top": window.pageYOffset,
  //                    "left": window.pageXOffset
  //                };
  //                return json;
                  return {
                      "top": window.pageYOffset,
                      "left": window.pageXOffset
                  };
              }else if(document.compatMode === "CSS1Compat"){
                  return {
                      "top": document.documentElement.scrollTop,
                      "left": document.documentElement.scrollLeft
                  };
              }else{
                  return {
                      "top": document.body.scrollTop,
                      "left": document.body.scrollLeft
                  };
              }

              //简单封装
  //            return {
  //                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
  //                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
  //            }
          }


                  window.onscroll = function () {
          //        var json = scroll();
          //        json.top;
                      console.log(scroll().top);
                      console.log(scroll().left);
                  }

6.标题栏滑动到一定位置固定—固定标题栏

 window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
            //步骤：
            //1.老三步。
            //2.判断 ，被卷曲的头部的大小
            //3.满足条件添加类，否则删除类


            //1.老三步。
            var topDiv = document.getElementById("top");
            var height = topDiv.offsetHeight;
            var middle = document.getElementById("Q-nav1");
            var main = document.getElementById("main");

            window.onscroll = function () {
                //2.判断 ，被卷曲的头部的大小
                if(scroll().top > height){
                    //3.满足条件添加类，否则删除类
                    middle.className += " fixed";
                    //第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
                    main.style.paddingTop = middle.offsetHeight+"px";
                }else{
                    middle.className = "";
                    //清零
                    main.style.paddingTop = 0;
                }
            }

        }

7.页面上下滑动

window.scrollTo(0,10);

8.小火箭返回顶部

<script>
        window.onload = function () {
            var img = document.getElementsByTagName("img")[0];
            var leader = 0 ; //记录当前页面到顶部的距离
            window.onscroll = function () {
                if(scroll().top>200){
                    img.style.display = "block";
                }else{
                    img.style.display = "none";
                }
                leader = scroll().top;
            }
            var timer = null ; //定时器
            var target = 0 ;  //目标值
            //点击跳到顶部   由leader   变为 0
            img.onclick = function () {
                 clearInterval(timer);
                timer = setInterval(function () {
                    var step = (target - leader)/10;
                    leader = leader + step ;  //记录滑动到的当前位置
                    window.scrollTo(0,leader);
                    //清除定时器
                    if(leader === 0 ){
                        clearInterval(timer);
                    }
                },25);
            }

        }

        function scroll() {  // 开始封装自己的scrollTop
            if(window.pageYOffset != null) {  // ie9+ 高版本浏览器
                // 因为 window.pageYOffset 默认的是  0  所以这里需要判断
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            }
            else if(document.compatMode === "CSS1Compat") {    // 标准浏览器   来判断有没有声明DTD
                return {
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }
            return {   // 未声明 DTD
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
        }
    </script>

======================================================================================

三. 第三大家族client
1.主要成员
(1)clientWidth 获取网页可视区域宽度（两种用法）
(2)clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同:
盒子调用：指盒子本身
浏览器调用：可视区域大小。

(3)clientX 鼠标距离可视区域左侧距离（event调用）
(4)clientY 鼠标距离可视区域上侧距离（event调用）

2.Width和height

(1) clientWidth  = width  + padding
(2)clientHeight  = height + padding
(3)offsetWidth  = width  + padding + border
(4)offsetHeight  = height + padding + border
(5)scrollWidth   = 内容宽度（不包含border）
(6)scrollHeight  = 内容高度（不包含border）

3.top和left
(1)offsetTop/offsetLeft
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。

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

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

4.Onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件

获取屏幕可视区域的宽高

 //新事件：浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
    window.onresize = function () {
        document.title = client().width + "    "+ client().height;
    }


    //获取屏幕可视区域的宽高
    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
            }
        }
    }

4.事件总结
(1)window.onscroll 屏幕滑动
(2)window.onresize 浏览器大小变化
(3)window.onload 页面加载完毕
(4)div.onmousemove 鼠标在盒子上移动
（注意：不是盒子移动！！！）
(5)onmouseup/onmousedown == onclick

5.获得屏幕宽高 (屏幕像素) 1920*1080

 window.screen.width
  window.onresize = function () {
          document.title = window.screen.width + "    "+ window.screen.height;
  }

6.事件冒泡
当一个元素上的事件被触发的时候，
比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡

7.阻止冒泡
取消冒泡就是取消这种机制，不触发祖先事件
(1)w3c的方法(火狐、谷歌、IE11)：event.stopPropagation()
(2)IE10以下则是使用：event.cancelBubble = true
(3)兼容方法

var event = event || window.event;
 if(event && event.stopPropagation){
            event.stopPropagation();
  }else{
            event.cancelBubble = true;
  }

8.隐藏模态框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
    <script src="jquery1.0.0.1.js"></script>
    <script>
        //需求：点击登录按钮，显示模态框。点击出去login以外的所有盒子隐藏模态框。
        //步骤：
        //1.给登录绑定事件
        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框


        //1.给登录绑定事件
        var mask = document.getElementsByClassName("mask")[0];
        var a = document.getElementsByTagName("a")[1];

        a.onclick = function (event) {
            //显示模态框
            show(mask);

            //阻止冒泡
            //自己处理，不传给父布局
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        }

        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框
        document.onclick = function (event) {
            //获取点击按钮后传递过来的值。
            event = event || window.event;

            //兼容获取事件触动时，被传递过来的对象
//            var aaa = event.target || event.srcElement;
            var aaa = event.target?event.target:event.srcElement;
            //获取事件源
            console.log(event.target);

            //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
            if(aaa.id !== "login"){
                mask.style.display = "none";
            }
        }


    </script>

</body>
</html>

=====
1.获取任意类型的CSS样式的属性值

  Div.style.width
  div.currentStyle.width
  Window.getComputedStyle(div,null).width;
 // 他们的公共使用变量或者字符串获取属性值的方法都是：去掉属性和点，然后加上中括号和属性的字符串形式。
  Div.style["width"];
  div.currentStyle["width"];
  Window.getComputedStyle(div,null)["width"];

  console.log(div.currentStyle.padding);
  console.log(div.currentStyle["background-color"]);

  //兼容方法获取元素样式
   function getStyle(ele,attr){
      if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
      }
      return ele.currentStyle[attr];
   }
   console.log(getStyle(div,"padding"));
   console.log(getStyle(div,"background-color"));

2.缓动动画封装(单个属性）

//参数变为3个
animate(div,"left",400);
animate(div,"width",400);

        function animate(ele,attr,target){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //四部---获取初始值
                //使用getStyle 获取属性值  没有就赋0
                var leader = parseInt(getStyle(ele,attr)) || 0;
                //1.获取步长
                var step = (target - leader)/10;
                //2.二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //3.赋值
                ele.style[attr] = leader + "px";
                 //4.清除定时器
                if(Math.abs(target-leader)<=Math.abs(step)){
                    ele.style[attr] = target + "px";
                    clearInterval(ele.timer);
                }

            },25);
}

3.缓动动画封装(多个属性）

var json = {"left":10,"top":200,"width":300,"height":200};
     animate(div,json);
}
//参数变为3个
function animate(ele,json){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    console.log(1);
                    //4.清除定时器
//                    if(Math.abs(json[k]-leader)<=Math.abs(step)){
//                        ele.style[k] = json[k] + "px";
//                        clearInterval(ele.timer);
//                    }
                }
            },25);
        }

4.缓动动画封装(多个属性+回掉函数）

<body>

    <button>运动到400然后回来</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json1 = {"left":300,"top":200,"width":300,"height":200};
            var json2 = {"left":10,"top":30,"width":100,"height":100};
            animate(div,json1, function () {
                animate(div,json2, function () {
                    animate(div,json1);
                });
            });

        }
        //参数变为3个  ，参数为函数：执行部分代码后在执行函数
        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                     //这种情况会把整个定时器都关闭掉
                   /* if(Math.abs(json[k]-leader)<=Math.abs(step)){
                        ele.style[k] = json[k] + "px";
                        //把整个定时器都关了
                        clearInterval(ele.timer);
                    }*/
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了，现在可以执行回调函数了
                    //只有传递了回调函数，才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }

        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }
    </script>
</body>

5.liArr[i].style.background = “url(images/”+(i+1)+”.jpg) no-repeat”;

6.窗口下移右转

<script>
        window.onload = function () {
            //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
            var guanbi = document.getElementById("guanbi");
            var box = guanbi.parentNode;
            var b = document.getElementById("b");

            guanbi.onclick = function () {
                //下面的盒子高度变为0，然后大盒子的宽在变为0.
                animate(b,{"height":0}, function () {
                    animate(box,{"width":0});
                });
            }
        }
    </script>

事件对象

   //点击页面的任何部分
         document.onclick = function (event) {
             //兼容写法
             event = event || window.event;
//            console.log(event);
            console.log(event);
            console.log(event.timeStamp);
            console.log(event.bubbles);
            console.log(event.button);
            console.log(event.pageX); //body
            console.log(event.pageY);
            console.log(event.screenX); //屏幕
            console.log(event.screenY);
            console.log(event.target);
            console.log(event.type);
            console.log(event.clientX);
            console.log(event.clientY); //浏览器可视区域

         }

8.获取整个页面的点击事件(获取鼠标的点击位置)

//整个页面的点击事件
document.onclick = function (event) {
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX;
}

liguangjiehao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端js特效笔记

Offset家族: offsetWidth和 offsetHight 以及 offsetLeft和 offsetTop以及 offsetParent共同组成了offset家族offsetWidth和offsetHight，能够获取元素节点的宽和高 offset宽/高 = 盒子自身的宽/高 + padding +border (1)offsetWidth = width+padding+bo
复制链接

扫一扫