前端案例-22 云朵移动案例

最新推荐文章于 2022-07-08 11:24:46 发布

KathyLJQ

最新推荐文章于 2022-07-08 11:24:46 发布

阅读量419

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/KathyLJQ/article/details/115839109

版权

前端案例专栏收录该内容

32 篇文章 3 订阅

订阅专栏

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="nav">
        <span></span>
        <ul>

            <li><a href="javascript:;">首页新闻</a> </li>
            <li><a href="javascript:;">体育快讯</a></li>
            <li><a href="javascript:;">生活故事</a></li>
            <li><a href="javascript:;">便民服务</a></li>
            <li><a href="javascript:;">公司简介</a></li>
            <li><a href="javascript:;">商品信息</a></li>
            <li><a href="javascript:;">热卖推荐</a></li>

        </ul>
        <img src="imgs/rss.png" alt="">
    </div>

</body>

</html>

index.css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

.nav {
    position: relative;
    margin: 100px auto;
    height: 42px;
    width: 1000px;
    background-color: white;
    border-radius: 10px;
}

span {
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 41px;
    background: url('../imgs/cloud.gif') no-repeat;
}

ul {
    position: absolute;
    top: 0;
    left: 0;
    height: 42px;
}

ul>li {
    list-style: none;
    float: left;
}

li>a {
    /* display: inline-block; */
    padding: 10px;
    text-decoration: none;
    color: black;
    line-height: 40px;
    cursor: pointer;
    background-color: transparent;
}

li>a:hover {
    color: white;
}

img {
    position: absolute;
    top: 5px;
    right: 20px;
}

index.js

window.addEventListener("load", function() {
    var liAll = document.querySelectorAll('ul>li');
    var cloud = document.querySelector('span');
    //1. 初始状态下京豆云位于第一个li
    //获取第一个li的offsetLeft值
    var initialLeft = liAll[0].offsetLeft;
    console.log(initialLeft);
    for (var i = 0; i < liAll.length; i++) {
        //鼠标放置移动云朵到当前元素位置
        liAll[i].addEventListener("mouseover", function() {
                //获取鼠标所在li的offsetLeft值,调用animate函数将云朵移动到当前li的位置
                var target = this.offsetLeft;
                animate(cloud, target);
            })
            //鼠标离开云朵回到原始位置
        liAll[i].addEventListener("mouseout", function() {
                var target = initialLeft;
                animate(cloud, target);

            })
            //鼠标点击，将当前位置设置为云朵的起始位置
        liAll[i].addEventListener("click", function() {
            initialLeft = this.offsetLeft;
        })

    }










})

animate.js

function animate(el, target, callback) {
    console.log("成功调用animate!");
    clearInterval(el.timer);
    var step = null;
    el.timer = setInterval(function() {
        step = (target - el.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        el.style.left = el.offsetLeft + step + 'px';
        // console.log(el.style.left);
        if (el.offsetLeft == target) {
            clearInterval(el.timer);
            if (callback) {

                callback();
            }
        }

    }, 20)
}

KathyLJQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端案例-22 云朵移动案例

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫

专栏目录