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

Posted 2020-09-09 明明明明明明明明

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-特效～ 02. 屏幕滚动事件 DTDscroll顶部悬浮导航两侧跟随广告返回顶部小火煎相关的知识，希望对你有一定的参考价值。

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（）｛｝

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11         body {
 12             background: rgba(0, 0, 0, 0.8);
 13         }
 14         .box {
 15             width: 800px;
 16             height: 42px;
 17             background: #fff url("images/wifi.png") right center no-repeat;
 18             margin: 200px auto;
 19             border-radius: 8px;
 20             position: relative;
 21         }
 22         ul {
 23             list-style: none;
 24             position: relative;
 25         }
 26         li {
 27             float: left;
 28             width: 83px;
 29             height: 42px;
 30             text-align: center;
 31             font: 500 16px/42px "simsun";
 32             cursor: pointer;
 33         }
 34         span {
 35             position: absolute;
 36             left: 0;
 37             top: 0;
 38             width: 83px;
 39             height: 42px;
 40             background: url("images/cloud.gif") no-repeat;
 41         }
 42     </style>
 43     <script>
 44         window.onload = function () {
 45             //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
 46             //需求2：鼠标点击那个li记录该li标签，移开的时候span回到该记录的li标签上。
 47             //步骤：
 48             //1.老三步
 49             //2.计数器
 50             //需求1：鼠标放到哪个li上面，span对应移动到该li上。移开后，回到原位置。
 51             //1.老三步
 52             var liArr = document.getElementsByTagName("li");
 53             var liWidth = liArr[0].offsetWidth;
 54             var span = document.getElementsByTagName("span")[0];
 55             //计数器
 56             var count = 0;
 57 
 58 
 59             //for循环绑定事件
 60             for(var i=0;i<liArr.length;i++){
 61                 //自定义属性，然后绑定index属性为索引值
 62                 liArr[i].index = i;
 63                 //鼠标进入事件
 64                 liArr[i].onmouseover = function () {
 65                     //让span运动到该li的索引值位置
 66                     //图片运动需要封装的方法
 67                     animate(span,this.index*liWidth);
 68                 }
 69                 //鼠标移开
 70                 liArr[i].onmouseout = function () {
 71                     //让span运动到该li的索引值位置
 72                     //图片运动需要封装的方法
 73                     animate(span,count*liWidth);
 74                 }
 75                 //点击事件，记录功能
 76                 liArr[i].onclick = function () {
 77                     //需要一个计数器，每次点击以后把所以只记录下来
 78                     //因为onmouseout事件要用到这个计数器，所以应该是一个全局变量
 79                     count = this.index;
 80                     animate(span,count*liWidth);
 81                 }
 82 
 83             }
 84 
 85             //缓动动画封装
 86             function animate(ele,target) {
 87                 clearInterval(ele.timer);
 88                 ele.timer = setInterval(function () {
 89                     var step = (target-ele.offsetLeft)/10;
 90                     step = step>0?Math.ceil(step):Math.floor(step);
 91                     ele.style.left = ele.offsetLeft + step + "px";
 92                     console.log(1);
 93                     if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){
 94                         ele.style.left = target + "px";
 95                         clearInterval(ele.timer);
 96                     }
 97                 },18);
 98             }
 99         }
100     </script>
101 </head>
102 <body>
103     <div class="box">
104         <span></span>
105         <ul>
106             <li>首页新闻</li>
107             <li>活动策划</li>
108             <li>师资力量</li>
109             <li>企业文化</li>
110             <li>招聘信息</li>
111             <li>公司简介</li>
112             <li>上海校区</li>
113             <li>广州校区</li>
114         </ul>
115     </div>
116 </body>
117 </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="images/top.png" >
    </div>
    <div id="Q-nav1">
        <img src="images/nav.png" >
    </div>
    <div class="main" id="main">
        <img src="images/main.png" />
    </div>
         两侧的广告
        <img class="img1" src="images/aside.jpg"/>
        <img class="img2" src="images/aside.jpg"/>
         <!--点击滑动到顶部-->
        <img id="topId" src="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;
}

封装

以上是关于JS-特效～ 02. 屏幕滚动事件 DTDscroll顶部悬浮导航两侧跟随广告返回顶部小火煎的主要内容，如果未能解决你的问题，请参考以下文章

JS-特效～ 01. 事件对象offset偏移／检测无缝滚动自动循环轮播图

js如何监听屏幕滚动到底了

这些例子的特效很炫，感觉的同学可以研究学习一下

移动端PC端网页特效

JS事件独立于手指压力

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

缓动动画

筋斗云

scroll

json:

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

　json: