动画效果广告移动

chenzhawu3547

于 2019-06-16 17:45:00 发布

阅读量103

点赞数

原文链接：https://my.oschina.net/u/4004801/blog/3062648

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .xiaomi {
            width: 512px;
            height: 400px;
            border: 1px solid #f00;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        .xiaomi span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }

        .up {
            top: 0;
        }

        .down {
            bottom: 0;
        }

        .xiaomi img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="xiaomi">
    <img src="images/mi.png" alt="" id="pic"/>
    <span class="up" id="goUp"></span>
    <span class="down" id="goDown"></span>
</div>
<script src="common.js"></script>

<script>
    /*需求分析：
        * 鼠标移入盒子上半部分，图片向上移动，top值越来越小
        * 鼠标移入盒子下半部分，图片向下移动，top值越来越大

     思路分析：
        * 页面布局：（1）div里面有一个大图片，设置div的overflow属性为hidden
        （2）给div分别添加两个span标签，对应上半部分和下半部分

       1.获取元素
       2.注册事件（鼠标移入和鼠标移除）
       3.事件处理
        * 鼠标移入：图片滚动
        * 鼠标移出：图片停止滚动

     */

    //1.获取元素
    var pic = id('pic');//大图片
    var goUp = id('goUp');//上移
    var goDown = id('goDown');//下移

    var currentTop = 0;//大图片当前的top值
    var timeID = null;//存储定时器timeID
    //2.注册事件（鼠标移入和鼠标移除）
    //2.1 上移
    goUp.onmouseover = function (  ) {
        //3.事件处理
        //图片top值越来越小
       timeID =  setInterval(function (  ) {
           //3.1 开始移动
            currentTop -= 10;
            //3.2 修改元素位置
            pic.style.top = currentTop + 'px';
            //3.3 边界检测:           注意负数：  图片高度（1470） - 盒子高度（400）
           if(currentTop <= -1070){
               //currentTop复位：否则每一次移入移出currentTop值都会变化导致顿闪现象
               currentTop = -1070;
               //清除定时器
               clearInterval(timeID);
               //元素位置复位：避免动画误差
               pic.style.top = '-1070px';
           }
        },50);
    }

    //鼠标移出
    goUp.onmouseout = function (  ) {
        // 3.事件处理
        //移除定时器
        clearInterval(timeID);
    }

    //2.2 下移
    goDown.onmouseover = function (  ) {
        //3.事件处理
        //图片top值越来越大
        timeID =  setInterval(function (  ) {
            //3.1 开始移动
            currentTop += 10;
            //3.2 修改元素位置
            pic.style.top = currentTop + 'px';
            //3.3 边界检测:
            if(currentTop >= 0 ){
                //currentTop复位：否则每一次移入移出currentTop值都会变化导致顿闪现象
                currentTop = 0;
                //清除定时器
                clearInterval(timeID);
                //元素位置复位：避免动画误差
                pic.style.top = '0px';
            }
        },50);
    }

    goDown.onmouseout = function (  ) {
            // 3.事件处理
        clearInterval(timeID);
        }

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

转载于:https://my.oschina.net/u/4004801/blog/3062648