JS-特效～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

ceil 向上取整

floor 向下取整

round 四舍五入

缓动动画

动画原理 = 盒子位置 + 步长
清除定时器
步长越来越小
盒子位置 = 盒子本身位置 + （目标位置-本身位置）/n（最好为10）
最后10像素容易容易出现问题

所以要向上取整
400-396 = 4 4/10 = 0.4 四舍五入 = 0
400-396 = 4 4/10 = 0.4 四舍五入 = 0

要用定时器先清除定时器

　　7. offsetLest取值为四舍五入

　　8. 差值大于0的时候向上取整

　　9. 差值小于0的时候向下取整

筋斗云

导航栏，鼠标移动筋斗云跟着移动，移开筋斗云回去
点击后筋斗云固定
鼠标移开，筋斗云跟着移动，点击后固定
定义一个全局变量，点击事件记录索引自豪
小数最好不要参与运算
window.onload =function（）｛｝

 <!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循环绑定事件

             for(var i=0;i<liArr.length;i++){

                 //自定义属性，然后绑定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

　　scrollWidth 宽度：获取宽高／不包括border和margin／包括padding

　　scrollHeight 高度：若内容没有溢出是盒子本身的高度／溢出是超出内容的高度总高度／

　　　　　　　　　　　　IE7（包括IE7）以下是内容的高度／包括padding不包括border margin

　　scrollLeft ：网页被卷去的左侧，调用者是 document.body

　　scrollTop：网页被卷去的头部／存在兼容性问题

　　onscroll 滚动滚轮：window.onscroll 只能使用一次以最后一个为准

　　DTD: 旧版本的浏览器遵循一些新的规则

　　　　　　未声明DTD，谷歌只识别DTD （IE9+认识他）：document.body.scrollTop

　　　　　　已经声明DTD，IE6/7/8 可以识别，IE9在任何时候都识别）

　　　　　　　　　　document.documentElement.scrollTop

　　　　　　火狐／谷歌／IE9+以上支持的（不管DTD）

　　　　　　　　　　window.pageYOffset

　　 window.body.scrollTop

　　 window.document.documentElement.scrollTop

　　 document.title 访问文档标题

　　 document.head　　　访问文档头部

　　 document.body　　　　访问文档主题

　　 document.document.Element　　　　获取文档的HTML标签

　　 body在动还是html标签在动

　json:

　　　　有一定属性和属性值的对象／用 for...in 遍历

for （var key in json){ 

    console.log （key）//属性 

    console.log（json[key]）;//属性值 

    ｝

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin:0;

            padding:0;

        }

        img {

            vertical-align:top;

        }

        .main {

            margin:0 auto;

            width: 1000px;

            margin-top: 10px;

        }

        #Q-nav1 {

            overflow: hidden;

        }

        .fixed {

            position: fixed;

            top:0;

            left: 0;

        }

        /* 两边fixed的广告*/

        .img1 {

            position: absolute;

            top: 80px;

            left: 10px;

        }

        .img2 {

            position: absolute;

            top: 80px;

            right: 10px;

        }

        /*回到顶部的按钮*/

         #topId {

            position:fixed;

            bottom:100px;

            right: 50px;

            cursor: pointer;

            display: none;

            border:1px solid #000000;

        }

    </style>

    <script src="my.js"></script>

    <script>

        window.onload = function () {

            var topDiv = document.getElementById("top");

            var height = topDiv.offsetHeight;

            var middle = document.getElementById("Q-nav1");

            var main = document.getElementById("main");

            // 两边fixed的广告

            var imgArr1 = document.getElementsByClassName("img1")[0];

            var imgArr2 = document.getElementsByClassName("img2")[0];

            // 小火煎

            var img = document.getElementById("topId");

            window.onscroll = function () {

                if (scroll().top > height){

                    middle.className += " fixed";

                    main.style.paddingTop = middle.offsetHeight+"px";

                }else {

                    middle.className = "";

                    main.style.paddingTop = 0 ;

                }

              // 两边fixed的广告

                var val =scroll().top ;

                animateFixed(imgArr1,val+80);

                animateFixed(imgArr2,val+80);

                // 回到顶部／当被卷去的头部超过1000则显示回到顶部小火箭

               // window.sc rollTo(x,y);浏览器显示区域跳转到指定的坐标

                if (scroll().top > 1000){

                    img.style.display = "block";

                }else {

                    img.style.display = "none";

                }

                leader = scroll().top;

            }

            var timer =null ;

            var target = 0;

            var leader = 0;

            img.onclick = function () {

                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 (leader == 0 ){

                        clearInterval(timer);

                    }

                },25)

            }

        }

    </script>

</head>

<body>

    <div class="top" id="top">

        <img src="data:images/top.png" alt="">

    </div>

    <div id="Q-nav1">

        <img src="data:images/nav.png" alt="">

    </div>

    <div class="main" id="main">

        <img src="data:images/main.png" alt=""/>

    </div>

         两侧的广告

        <img class="img1" src="data:images/aside.jpg"/>

        <img class="img2" src="data:images/aside.jpg"/>

         <!--点击滑动到顶部-->

        <img id="topId" src="data:images/Top2.jpg" />

</body>

</html>

顶部悬浮导航、两侧跟随广告、返回顶部小火煎

/**

 * Created by mingming on 2017/4/7.

 */

/**

 *

 * @returns {*}

 * 获取屏幕滚动事件属性

 */

function scroll() {

    if (window.pageYOffset !== undefined) {// ie9+ 高版本浏览器

        // 因为 window.pageYOffset 默认是 0  所以这里需要判断

        return {

            left:window.pageXOffset,

            top:window.pageYOffset

        }

    }

    else if (document.compatMode === "CSS1Compat") { // 标准浏览器

        return{

            left:document.documentElement.scrollLeft,

            top:document.documentElement.scrollTop

        }

    }

    return { // 未声明 DTD

        left:document.body.scrollLeft,

        top:document.body.scrollTop

    }

}

/**

 * 侧边栏fixed的广告

 */

    function animateFixed(ele,target) {

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            var step = (target-ele.offsetTop)/10 ;

            step = step>0? Math.ceil(step):Math.floor(step);

            ele.style.top = ele.offsetTop + step +"px";

            if(Math.abs(target - ele.offsetTop)<=Math.abs(step)){

                ele.style.top = target +"px";

                clearInterval(ele.timer);

            }

        },25)

}

/**

 * 缓动画封装

 *

 */

    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";

            if (Math.abs(target-ele.offsetLeft)<Math.abs(step)){

                ele.style.left = target+"px";

                clearInterval(ele.timer);

            }

        },18)

    }

/**

 * Created by Lenovo on 2016/9/2.

 */

/**

 * 通过传递不同的参数获取不同的元素

 * @param str

 * @returns {*}

 */

function $(str){

    var str1 = str.charAt(0);

    if(str1==="#"){

        return document.getElementById(str.slice(1));

    }else if(str1 === "."){

        return document.getElementsByClassName(str.slice(1));

    }else{

        return document.getElementsByTagName(str);

    }

}

/**

 * 功能：给定元素查找他的第一个元素子节点，并返回

 * @param ele

 * @returns {Element|*|Node}

 */

function getFirstNode(ele){

    var node = ele.firstElementChild || ele.firstChild;

    return node;

}

/**

 * 功能：给定元素查找他的最后一个元素子节点，并返回

 * @param ele

 * @returns {Element|*|Node}

 */

function getLastNode(ele){

    return ele.lastElementChild || ele.lastChild;

}

/**

 * 功能：给定元素查找他的下一个元素兄弟节点，并返回

 * @param ele

 * @returns {Element|*|Node}

 */

function getNextNode(ele){

    return ele.nextElementSibling || ele.nextSibling;

}

/**

 * 功能：给定元素查找他的上一个兄弟元素节点，并返回

 * @param ele

 * @returns {Element|*|Node}

 */

function getPrevNode(ele){

    return ele.previousElementSibling || ele.previousSibling;

}

/**

 * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回

 * @param ele 元素节点

 * @param index 索引值

 * @returns {*|HTMLElement}

 */

function getEleOfIndex(ele,index){

    return ele.parentNode.children[index];

}

/**

 * 功能：给定元素查找他的所有兄弟元素，并返回数组

 * @param ele

 * @returns {Array}

 */

function getAllSiblings(ele){

    //定义一个新数组，装所有的兄弟元素，将来返回

    var newArr = [];

    var arr = ele.parentNode.children;

    for(var i=0;i<arr.length;i++){

        //判断，如果不是传递过来的元素本身，那么添加到新数组中。

        if(arr[i]!==ele){

            newArr.push(arr[i]);

        }

    }

    return newArr;

}

封装