三大家族之offset案例

最新推荐文章于 2022-04-15 21:25:03 发布

Xian_Nv_Ling

最新推荐文章于 2022-04-15 21:25:03 发布

阅读量267

点赞数 1

本文链接：https://blog.csdn.net/Xian_Nv_Ling/article/details/81087602

版权

要实现鼠标移动到哪个位置，背影图随之改变如图二，不移动则变成图一；并且实现鼠标点击后背景图停留在此。

图一

图二

分析：要想背景图移动到鼠标经过li的对应位置，只需求出图片背景的左边需要多大（也就是黄色区域）。

图三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    ul {list-style: none;}
        html,body {
            height: 100%;
            width: 100%;
            background: black;
        }
        a {text-decoration: none}

        ul {
            position: relative;
            background: white;
            overflow:hidden;
            width: 900px;
            margin: 50px auto;
            padding: 20px 0px;
            display: flex;
            border-radius: 5px;
        }

        ul li {
            position: relative;
            z-index: 10;
            flex: 1;
            text-align: center;
        }

        ul li a {
            font-size: 18px;
            color: #333;
        }

        .cloud {
            width: 83px;
            height: 42px;
            display: inline-block;
            background: url(img/cloud.gif);
            position: absolute;
            left: 34px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            z-index: 2;
        }
    </style>
</head>
<body>
    <ul>
        <span class="cloud"></span>
        <li>
            <a href="javascript:void(0);">首页</a>
        </li>
        <li>
            <a href="javascript:void(0);">电视剧</a>
        </li>
        <li>
            <a href="javascript:void(0);">最新电影</a>
        </li>
        <li>
            <a href="javascript:void(0);">新闻头条</a>
        </li>
        <li>
            <a href="javascript:void(0);">八卦娱乐</a>
        </li>
        <li>
            <a href="javascript:void(0);">军事热点</a>
        </li>
    </ul>
<script type="text/javascript">
    var liList = document.getElementsByTagName("li");
    var bg=document.getElementsByClassName("cloud")[0];
    //运动间隔
    var header = 34;
    //目标数
    var liLeft = 34; 
    var hz=34;    //li的初始left值
    //遍历整个li
    for(var i=0;i<liList.length;i++){
        //设置经过鼠标效果
        over=liList[i].onmouseover=function(){
            //算法见图三
           liLeft=this.offsetLeft+(this.offsetWidth/2)-(bg.offsetWidth/2);
        }
        //设置鼠标离开效果
        liList[i].onmouseout=function(){
            //li回到初始位置 也就是图一
            liLeft=hz;
        }
        //点击每个li时的点击事件
        liList[i].onclick=function(){
            hz=this.offsetLeft+(this.offsetWidth/2)-(bg.offsetWidth/2);
        }
    }
    //设置动画运动先快后慢的效果
    setInterval(function() {
            header = header + (liLeft - header) / 10;
            //把li中心的左距离赋给图片背景样式中的left
            bg.style.left = header + "px";
        }, 20)

</script>

    
</body>
</html>

Xian_Nv_Ling

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三大家族之offset案例

要实现鼠标移动到哪个位置，背影图随之改变如图二，不移动则变成图一；并且实现鼠标点击后背景图停留在此。图一图二分析：要想背景图移动到鼠标经过li的对应位置，只需求出图片背景的左边需要多大（也就是黄色区域）。图三&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="U...
复制链接

扫一扫