前端学习笔记-JS-BOM-页面滚动/筋斗云跟随鼠标移动案例

最新推荐文章于 2021-12-09 21:49:21 发布

Nanami Touko

最新推荐文章于 2021-12-09 21:49:21 发布

阅读量235

点赞数

分类专栏：前端学习-JavaScript DOM BOM

本文链接：https://blog.csdn.net/qq_36434637/article/details/101110058

版权

前端学习-JavaScript DOM BOM 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

滚动窗口至文档中的特定位置

window.scroll(x,y)

筋斗云跟随鼠标移动案例

分析：

1.利用动画函数做动画效果

2.原先筋斗云的起始位置是0

3.鼠标经过某个小li，把当前小li的offsetLeft位置作为目标值即可

4.鼠标离开某个小li，就把目标值设为0

5.如果点击了某个小li，就把li当前的位置存储起来，作为筋斗云的起始位置

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <script src="animate.js"></script>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background-color: black;
        }
        
        .c-nav {
            width: 900px;
            height: 42px;
            background: #fff url(images/rss.png) no-repeat right center;
            margin: 100px auto;
            border-radius: 5px;
            position: relative;
        }
        
        .c-nav ul {
            position: absolute;
        }
        
        .c-nav li {
            float: left;
            width: 83px;
            text-align: center;
            line-height: 42px;
        }
        
        .c-nav li a {
            color: #333;
            text-decoration: none;
            display: inline-block;
            height: 42px;
        }
        
        .c-nav li a:hover {
            color: white;
        }
        
        .c-nav li.current a {
            color: #0dff1d;
        }
        
        .cloud {
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
        }
    </style>
</head>

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li class="current"><a href="#">首页新闻</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">活动策划</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">我是佩奇</a></li>
            <li><a href="#">啥是佩奇</a></li>
        </ul>
    </div>
    <script>
        //获取元素
        var cloud=document.querySelector('.cloud');
        var c_nav=document.querySelector('.c-nav');
        var lis=c_nav.querySelectorAll('li');
        // 定义一个变量 用于存储鼠标点击之后的位置 等点击之后 鼠标就把这个位置作为起始位置
        var current=0;
        // 给所有 li 绑定事件
        for (var i=0;i<lis.length;i++){
            // 鼠标经过 的让cloud移动到当前的 li的位置
            lis[i].addEventListener('mouseenter',function () {
                animate(cloud,this.offsetLeft);
            });
            // 鼠标离开 让cloud移动到当前的 0的位置
            lis[i].addEventListener('mouseleave',function () {
                // animate(cloud,0);
                animate(cloud,current);
            });
            // 鼠标点击后 以当前的位置 作为下一次移动的起始位置
            lis[i].addEventListener('click',function () {
                animate(cloud,this.offsetLeft);
                current=this.offsetLeft;
            });
        }
    </script>
</body>
</html>

JS动画函数：

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

Nanami Touko

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-JS-BOM-页面滚动/筋斗云跟随鼠标移动案例

滚动窗口至文档中的特定位置window.scroll(x,y)筋斗云跟随鼠标移动案例分析：1.利用动画函数做动画效果2.原先筋斗云的起始位置是03.鼠标经过某个小li，把当前小li的offsetLeft位置作为目标值即可4.鼠标离开某个小li，就把目标值设为05.如果点击了某个小li，就把li当前的位置存储起来，作为筋斗云的起始位置HTML：&lt...
复制链接

扫一扫