个人中心
gpt4 book ai didi

多个链接的Javascript动画？

转载 作者：行者123 更新时间：2023-11-28 16:18:53 25 4
gpt4 key购买 nike

我希望我在第一个链接上做的动画应该出现在所有链接上。但是我只能在其中一个链接上应用 id="tag"(请参阅 HTML 代码)。我需要一种方法，使相同的函数可以为鼠标悬停时调用它的任何链接设置动画。任何替代方法也可以，也许使用“this”关键字。

function step(delta) {
  var elem = document.getElementById("tab");
  var from = [0, 0, 0],
    to = [180, 120, 120];
  elem.style.backgroundColor = 'rgb(' +
    parseInt(from[0] + delta * (to[0] - from[0])) + ',' +
    parseInt(from[1] + delta * (to[1] - from[1])) + ',' +
    parseInt(from[2] + delta * (to[2] - from[2])) + ')';
}

function smooth() {
  var duration = 200;
  var start = new Date();
  var id = setInterval(change, 1);

  function change() {
    var timePassed = new Date() - start;
    var progress = timePassed / duration;
    if (progress > 1) progress = 1;
    var delta = progress;
    step(delta);
    if (progress == 1) clearInterval(id);
  }
}
ul {
  list-style-type: none;
  background-color: rgb(0, 0, 0);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Gallery</title>
  <link rel="stylesheet" href="styles/styleweb.css">
</head>

<body>
  <ul>
    <li><a id="tab" onmouseover="smooth()" href="som.html">Shadow of Mordor</a></li>
    <li><a onmouseover="smooth()" href="tr.html">Tomb Raider</a></li>
    <li><a onmouseover="smooth()" href="ac.html">Assassin's Creed</a></li>
    <li><a onmouseover="smooth()" href="bf4.html">Battlefield 4</a></li>
  </ul>

</html>

最佳答案

给你。

要点:-

1) 为 li 元素而不是 anchor 元素设置了一个“制表符”类。

2) mouseover 事件监听器为 JS 代码中的所有“tab”类元素设置，使您的 HTML 更整洁。

3) 使用 event.target 将鼠标悬停在其上的元素的引用传递给 step()

4) 建议为 mouseout 添加另一个事件监听器以重置 li 元素的背景颜色更改。

Link to JSFiddle

完整代码=>

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img {
            margin: 10px;
            width: 270px;
            float: left;
            opacity: 0.4;
        }

        ul {
            list-style-type: none;
            background-color: rgb(0, 0, 0);
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            padding: 12px;
            text-decoration: none;
            color: white;
            cursor: pointer;
        }

        div a img:hover {
            opacity: 1.0;
            width: 290px;
            margin: 5px 0 0 0;
        }

        #mid {
            overflow: hidden;
            margin: 40px auto;
            width: 1170px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="tab"><a href="som.html">Shadow of Mordor</a>
        </li>
        <li class="tab"><a href="tr.html">Tomb Raider</a>
        </li>
        <li class="tab"><a href="ac.html">Assassin's Creed</a>
        </li>
        <li class="tab"><a href="bf4.html">Battlefield 4</a>
        </li>
    </ul>
    <div id="mid">
        <div>
            <a href="http://worldversus.com/img/assassins-creed.jpg">
                <img src="images/ac/1.jpg">
            </a>
        </div>
        <div>
            <a href="http://www.mediastinger.com/wp-content/uploads/2013/10/Assassins-Creed-Black-Flag-after-credits-hq.jpg">
                <img src="images/ac/2.jpg">
            </a>
        </div>
        <div>
            <a href="http://egmr.net/wp-content/gallery/18-nov-2014-review-ac-unity/assass-unity.jpg?24e25d">
                <img src="images/ac/3.jpg">
            </a>
        </div>
        <div>
            <a href="https://images-eds-ssl.xboxlive.com/image?url=8Oaj9Ryq1G1_p3lLnXlsaZgGzAie6Mnu24_PawYuDYIoH77pJ.X5Z.MqQPibUVTc0FCED4ph6ouevcPKpUexEae42sK1L4abdr36cYbFg4G4ofQlf6Ap41qwSQE4bCej.ENDwdWBb6xDzigKhhH0qYvtoqHqiprHkhGpbyYtNJE3oju9YrHyPXal_7gB.XZvNrsFG5dcIRXfUV33KDFrPeFl379b5KBjp2MNGhf.7LU-&format=jpg">
                <img src="images/ac/4.jpg">
            </a>
        </div>
    </div>
    <div id="mid">
        <div>
            <a href="http://hq-oboi.ru/photo/assasins_krid_1920x1080.jpg">
                <img src="images/ac/5.jpg">
            </a>
        </div>
        <div>
            <a href="http://www.imgbase.info/images/safe-wallpapers/video_games/assassins_creed_2/4247_video_games_assasins_creed.jpg">
                <img src="images/ac/6.jpg">
            </a>
        </div>
        <div>
            <a href="http://wallpoper.com/images/00/45/05/97/assassins-creed-11_00450597.jpg">
                <img src="images/ac/7.jpg">
            </a>
        </div>
        <div>
            <a href="https://images-eds-ssl.xboxlive.com/image?url=8Oaj9Ryq1G1_p3lLnXlsaZgGzAie6Mnu24_PawYuDYIoH77pJ.X5Z.MqQPibUVTcsPTaZHCOi.gQ4NDogeo4.TqXBFvO.nSfIzhmc_YrTHs0al36bdFgkybp_1BaryxmOBZ4OnePryCoo0dAUhCvuKYPS17rz27TOZ6fKbVR9T9cW6h_VpeaE3eGtS8JmETueVQdOrvbOyLjTTbxjs_FKOhnSrdWbfQ2uFgJamJ929Y-&format=jpg">
                <img src="images/ac/8.jpg">
            </a>
        </div>
    </div>
    <script src="scripts/main.js"></script>
    <script type="text/javascript">
        function step(delta, element) {
            console.log("step() called");
            var from = [0, 0, 0],
                to = [180, 120, 120];
            element.style.backgroundColor = 'rgb(' +
                parseInt(from[0] + delta * (to[0] - from[0])) + ',' +
                parseInt(from[1] + delta * (to[1] - from[1])) + ',' +
                parseInt(from[2] + delta * (to[2] - from[2])) + ')';
        }

        function smooth(event) {
            console.log("smooth() called");
            var duration = 200;
            var start = new Date();
            var id = setInterval(change, 1);

            function change() {
                var timePassed = new Date() - start;
                var progress = timePassed / duration;
                if (progress > 1) progress = 1;
                var delta = progress;
                step(delta, event.target);
                if (progress == 1) clearInterval(id);
            }
        }

        var tabAnchorTags = document.getElementsByClassName("tab");

        for (var i = 0; i < tabAnchorTags.length; i++) {
            tabAnchorTags[i].addEventListener("mouseover", smooth, false);
        }
    </script>
</body>

</html>

关于多个链接的Javascript动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37223450/

25 4 0
文章推荐： javascript - 无法将文本与图片垂直对齐
文章推荐： javascript - 文本建议超链接
文章推荐： javascript - 如何在服务、技能、组合等中添加滑动效果？
文章推荐： html - 整页白色背景预加载器在链接单击时淡入(示例)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com