花瓣导航栏

最新推荐文章于 2022-06-21 13:30:43 发布

沐梓沐囡

最新推荐文章于 2022-06-21 13:30:43 发布

阅读量949

点赞数 1

分类专栏： js特效动画文章标签：动画导航栏导航 animate

本文链接：https://blog.csdn.net/yy_9_aa/article/details/78079147

版权

js特效同时被 2 个专栏收录

3 篇文章

订阅专栏

动画

3 篇文章

订阅专栏

当鼠标点击到<li></li>标签时，背景花瓣会跟着鼠标移动。当点击<li></li>时鼠标会定住，当鼠标移走的时候，花瓣会退回到上一次记录的位置。

样式如下：

源码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>花瓣导航</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: pink;
        }
      #box{
          width: 800px;
          height: 42px;
          border-radius: 8px;
          position: relative;
          margin: 200px auto;
          background:  rgba(0,0,0,0.7) url("img6/112.png") right center no-repeat;
      }
        ul{
            list-style: none;
            position: relative;
        }
        li{
            width: 83px;
            height: 42px;
            color:blue;
            font: 500 16px/42px sinsun;
            float: left;
            text-align: center;
        }
        span{
            background-image: url("img6/11.png");
            position: absolute;
            left: 0;
            top: 0;
            width: 83px;
            height: 42px;
        }
    </style>
    <script>
        window.onload=function(){
            var liArr=document.getElementsByTagName("li");
            var liWidth=liArr[0].offsetWidth;
            var span=document.getElementsByTagName("span")[0];
            var count=0;
            //移动图片定位到li
            for(var i=0;i<liArr.length;i++){
                liArr[i].index=i;
                liArr[i].onmouseover=function(){
                    animate(span,this.index*liWidth);
                }
                //鼠标移开
                liArr[i].onmouseout=function(){
                    animate(span,count*liWidth);
                }
                //点击事件记录该功能
                liArr[i].onclick=function(){
                    count=this.index;
                    animate(span,count*liWidth);
                }
            }
            //定义动画
            function animate(ele,target){
                clearInterval(ele.timer);
                ele.timer=setInterval(function(){
                    var stept=(target-ele.offsetLeft)/10;
                    stept>0?Math.ceil(stept):Math.floor(stept);
                    ele.style.left=ele.offsetLeft+stept+"px";
                    if(Math.abs(target-ele.offsetLeft)<=Math.abs(stept)){
                        ele.style.left=target+"px";
                        clearInterval(ele.timer);
                    }
                },18)
            }
        }
    </script>
</head>
<body>
<div   id="box">
    <span></span>
    <ul>
        <li>兰花</li>
        <li>荷花</li>
        <li>梅花</li>
        <li>菊花</li>
        <li>莲花</li>
        <li>芙蓉</li>
        <li>牡丹</li>
        <li>玫瑰</li>
    </ul>
</div>
</body>
</html>