Web:动画云-溢出和鼠标中点击

Web: Animated clouds -- overflow and middle mouse click?

本文关键字：鼠标 溢出 动画 Web      更新时间：2023-09-26

我正在创建一个具有"卡通"感觉的网站，并决定从左到右有动画云。唯一的问题是，我可以点击中键到屏幕外云所在的位置。是否有一种方法来禁用鼠标中点击或隐藏云，直到它需要在屏幕上?

注意:容器已经有:overflow: hidden;

这是我当前的HTML:

    <div id="clouds">
        <!-- Background Clouds -->
        <div class="cloud background medium left-fast" style="top: 2%;"></div>
        <div class="cloud background small left-slow" style="left: -5%; top: 20%;"></div>
        <div class="cloud background large left-slower" style="top: 7.5%;"></div>
        <div class="cloud background small left-slowest" style="left: 14%; top: 18%;"></div>
        <!-- Foreground Clouds -->
        <div class="cloud medium fast" style="top: 2%;"></div>
        <div class="cloud small slow" style="left: 5%; top: 20%;"></div>
        <div class="cloud large slower" style="top: 7.5%;"></div>
        <div class="cloud small slowest" style="left: -14%; top: 18%;"></div>
    </div>

和我当前的CSS:

/* Clouds container */
#clouds{
    width: 100%; height: 20%;
    padding: 100px 0;
}
/* General Cloud */
.cloud {
    /* General properties of a cloud */
    background: url('../images/clouds.png');
    position: absolute; 
    visibility: hidden;
}
/* Background Clouds */
.cloud.background.small {
    /* Appearance */
    background-position: -23px -194px;
    width: 250px; height: 85px;
}
.cloud.background.medium {
    /* Appearance */
    background-position: -666px -149px;
    width: 279px; height: 119px;
}
.cloud.background.large {
    background-position: -543px -329px;
    width: 360px; height: 149px;
}
/* Foreground clouds */
.cloud.small {
    background-position: -321px -24px;
    width: 246px; height: 91px;
}
.cloud.medium {
    /* Appearance */
    background-position: -628px -18px;
    width: 312px; height: 81px;
}
.cloud.large {
    /* Appearance */
    background-position: -27px -22px;
    width: 259px; height: 104px;
}
/* Background Cloud Animations and Speeds */
.cloud.left-fast {
    /* Fast animation */
    -webkit-animation: cloudMovementBackground 40s linear infinite;
    -moz-animation: cloudMovementBackground 40s linear infinite;
}
.cloud.left-slow {
    /* Slow animation */
    -webkit-animation: cloudMovementBackground 40s linear 3s infinite;
    -moz-animation: cloudMovementBackground 40s linear 3s infinite;
}
.cloud.left-slower {
    /* Slower animation */
    -webkit-animation: cloudMovementBackground 40s linear 7s infinite;
    -moz-animation: cloudMovementBackground 40s linear 7s infinite;
}
.cloud.left-slowest {
    /* Slowest animation */
    -webkit-animation: cloudMovementBackground 40s linear 12s infinite;
    -moz-animation: cloudMovementBackground 40s linear 12s infinite;
}
/* Foreground Cloud Animations and Speeds */
.cloud.fast {
    /* Fast animation */
    -webkit-animation: cloudMovement 40s linear infinite;
    -moz-animation: cloudMovement 40s linear infinite;
}
.cloud.slow {
    /* Slow animation */
    -webkit-animation: cloudMovement 40s linear 3s infinite;
    -moz-animation: cloudMovement 40s linear 3s infinite;
}
.cloud.slower {
    /* Slower animation */
    -webkit-animation: cloudMovement 40s linear 7s infinite;
    -moz-animation: cloudMovement 40s linear 7s infinite;
}
.cloud.slowest {
    /* Slowest animation */
    -webkit-animation: cloudMovement 40s linear 12s infinite;
    -moz-animation: cloudMovement 40s linear 12s infinite;
}
/* Animations */
@-webkit-keyframes cloudMovement {
    0% {
    margin-left: -30%;
    visibility: visible;
    }
    100% {
    margin-left: 110%;
    }
}
@-moz-keyframes cloudMovement {
    0% {
    margin-left: -30%;
    visibility: visible;
    }
    100% {
    margin-left: 110%;
    }
}
@-webkit-keyframes cloudMovementBackground {
    0% {
    margin-left: 110%;
    }
    5% {
    visibility: visible;
    }
    100% {
    margin-left: -50%;
    }
}
@-moz-keyframes cloudMovementBackground {
    0% {
    margin-left: 110%;
    }
    8% {
    visibility: visible;
    }
    100% {
    margin-left: -50%;
    }
}

谢谢你的帮助!:)

首先，您建议的两种方法都应该有效。我将帮助你提出第二个建议。您可以使用Java脚本禁用几乎任何标准行为。关键是[preventDefault][1]函数。

这里有一个可能对你有用的例子。(你应该把它添加到你的html页面的标题部分)

<script>
  window.addEventListener('click', function(e) {
    if (e.button === 1){
      e.preventDefault();
    }
  }, true);
</script>

这应该捕获任何中间点击，包括滚动轮。如果在某些浏览器中仍然可以使用左键或右键左右滚动，

也可以使用css属性overflow-x。如果为包含云的div设置overflow-x: hidden，则不允许在页面外呈现。你也可以将div设置为固定的，这样当你向下滚动时，云就不会滚动。

#id {
overflow-x:hidden;
width: 100%;
height: 100%;
position: fixed;
display: block;
top: 0;
left: 0;
}

我希望你能成功。

相关文章：