如何在JS中随机化backgroundPosition而不使用鼠标移动来制作万花筒的动画

How to randomize backgroundPosition in JS without using mousemove to animate kaleidoscope

本文关键字：移动 鼠标 动画 万花筒 JS 随机化 backgroundPosition      更新时间：2024-06-24

正在为网页制作万花筒动画。。。但只能找到这个例子，但它使用鼠标移动。如何修改，使其随机化背景而不是鼠标移动？

HTML

<div class="kal_main">
    <div class="kal_cont">
      <div class="ks s1"><div class="ksc"></div></div>
      <div class="ks s2"><div class="ksc"></div></div>
      <div class="ks s3"><div class="ksc"></div></div>
      <div class="ks s4"><div class="ksc"></div></div>
      <div class="ks s5"><div class="ksc"></div></div>
      <div class="ks s6"><div class="ksc"></div></div>
      <div class="ks s7"><div class="ksc"></div></div>
      <div class="ks s8"><div class="ksc"></div></div>
      <div class="ks s9"><div class="ksc"></div></div>
      <div class="ks s10"><div class="ksc"></div></div>
      <div class="ks s11"><div class="ksc"></div></div>
      <div class="ks s12"><div class="ksc"></div></div>
    </div>
</div>

JS

$(document).ready(function() {
$(".kal_cont").each(function(i){ 
    $(this).mousemove(function(e) {
        $(this).find(".ksc").each(function(i){ 
            $(this).css({backgroundPosition: e.pageX+"px "+e.pageY+"px"});
        });
    });
});

})；

CSS

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.example {
    width: 920px;
    height: 510px;
    border: 0px #000 solid;
    margin: 0px auto;
    padding: 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
    /* common kaleidoscope styles */
.kal_main {
    background-image: url(../patterns/Animation-Background.png);
    overflow: hidden;
    width: 920px;
    height: 510px;
    margin: auto;
}
.kal_cont {
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    position: relative;
    margin: auto;
}
.kal_cont .ks {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    overflow: hidden;
}
.kal_cont .ksc {
    height: 100%;
    width: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    position: relative;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    left: 100%;
    top: 0;
    background-image: url(../patterns/Brain-no-stem.png);
}

发布其余CSS代码时遇到问题。

如果没有看到一个例子，很难回答，但很可能会是这样。当文档准备就绪时，将调用animateKS函数。这个函数在每个".ksc"上循环，设置一个新的背景位置，然后设置一个时间，从现在起200-500毫秒做同样的事情（你可以通过播放传递给getRandom.的数字来调整这个时间量

注意：在编写过程中，此代码不起作用。设置背景位置的代码仍然是基于e.pageX和e.pageY设置的，这是您发布的示例中鼠标的位置。您需要使用不同的值来更改背景位置。根据您要做的操作，将调用结果传递给getRandom并传递适当的范围可能很容易。

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var bgPos = 0;
function animateKS() {
    $(".ksc").each(function(i){ 
        $(this).css({
            backgroundPosition: bgPos+"px "+bgPos+"px"
        });
    });
    bgPos = bgPos+10;
    setTimeout(animateKS, getRandom(200, 500));
}
$(document).ready(function() {
    animateKs();
});
相关文章：