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

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

ceil 向上取整

floor 向下取整

round 四舍五入

 

缓动动画

  1. 动画原理 = 盒子位置 + 步长
  2. 清除定时器
  3. 步长越来越小
  4. 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为10)
  5. 最后10像素容易 容易出现问题
    1. 所以要向上取整
    2. 400-396 = 4  4/10 = 0.4   四舍五入 = 0
    3. 400-396 = 4  4/10 = 0.4   四舍五入 = 0
  6. 要用定时器 先清除定时器

  7.  offsetLest取值为四舍五入

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

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

筋斗云

  1. 导航栏,鼠标移动 筋斗云跟着移动,移开筋斗云回去
  2. 点击后筋斗云固定
  3. 鼠标移开,筋斗云跟着移动, 点击后固定
  4. 定义一个全局变量,点击事件记录索引自豪
  5. 小数最好不要参与运算
  6. 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.pageYOffset

    window.body.scrollTop

    window.document.documentElement.scrollTop

    document.title 访问文档标题

    document.head   访问文档头部

    document.body    访问文档主题

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

    body在动还是html标签在动

 json:

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

    

forvar 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="http://www.mamicode.com/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="http://www.mamicode.com/images/top.png" >
    </div>
    <div id="Q-nav1">
        <img src="http://www.mamicode.com/images/nav.png" >
    </div>
    <div class="main" id="main">
        <img src="http://www.mamicode.com/images/main.png" />
    </div>
         两侧的广告
        <img class="img1" src="http://www.mamicode.com/images/aside.jpg"/>
        <img class="img2" src="http://www.mamicode.com/images/aside.jpg"/>
         <!--点击滑动到顶部-->
        <img id="topId" src="http://www.mamicode.com/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. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎