Question

我正在创建一个带有＆＃34; toony＆＃34;感觉并决定拥有从左到右的动画云。唯一的问题是我可以在中间点击我的屏幕外云。有没有办法禁用鼠标中键或隐藏云，直到屏幕上需要它？

注意：容器已经有：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%;
    }
}

感谢您的帮助！：）

Answer 1

首先，您建议的两种方法都应该有效。我会帮你提出第二个建议。您可以使用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;
}

我希望这对你有用。

Web：动画云 - 溢出和鼠标中键点击？

1 个答案: