javascript动画在分辨率较高的屏幕上不方便

问题描述 投票：1回答：1

我有一个动画，其中26个小的.SVG随机在视口中导航，在我的Macbook上，动画效果完美，而在手机上，动画效果完美，但是当我在分辨率很高的大型（台式）设备上进行测试时，屏幕上，动画令人讨厌。有谁知道这可能导致这种情况发生？

JSF代码中间：https://jsfiddle.net/gzunsq1v/1/

代码：

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<div id="container">
    <div class="a"><img src="images/aos-index.svg" class="index" alt="." /></div>
    <div class="b"><img src="images/2os-index.svg" class="index" alt="." /></div>
    <div class="c"><img src="images/3os-index.svg" class="index" alt="." /></div>
    <div class="d"><img src="images/4os-index.svg" class="index" alt="." /></div>
    <div class="e"><img src="images/5os-index.svg" class="index" alt="." /></div>
    <div class="f"><img src="images/6os-index.svg" class="index" alt="." /></div>
    <div class="g"><img src="images/7os-index.svg" class="index" alt="." /></div>
    <div class="h"><img src="images/8os-index.svg" class="index" alt="." /></div>
    <div class="i"><img src="images/9os-index.svg" class="index" alt="." /></div>
    <div class="j"><img src="images/tos-index.svg" class="index" alt="." /></div>
    <div class="k"><img src="images/jos-index.svg" class="index" alt="." /></div>
    <div class="l"><img src="images/qos-index.svg" class="index" alt="." /></div>
    <div class="m"><img src="images/kos-index.svg" class="index" alt="." /></div>
    <div class="n"><img src="images/aoc-index.svg" class="index" alt="." /></div>
    <div class="o"><img src="images/2oc-index.svg" class="index" alt="." /></div>
    <div class="p"><img src="images/3oc-index.svg" class="index" alt="." /></div>
    <div class="q"><img src="images/4oc-index.svg" class="index" alt="." /></div>
    <div class="r"><img src="images/5oc-index.svg" class="index" alt="." /></div>
    <div class="s"><img src="images/6oc-index.svg" class="index" alt="." /></div>
    <div class="t"><img src="images/7oc-index.svg" class="index" alt="." /></div>
    <div class="u"><img src="images/8oc-index.svg" class="index" alt="." /></div>
    <div class="v"><img src="images/9oc-index.svg" class="index" alt="." /></div>
    <div class="w"><img src="images/toc-index.svg" class="index" alt="." /></div>
    <div class="x"><img src="images/joc-index.svg" class="index" alt="." /></div>
    <div class="y"><img src="images/qoc-index.svg" class="index" alt="." /></div>
    <div class="z"><img src="images/koc-index.svg" class="index" alt="." /></div>
</div>

<script>
    $(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));
    animateDiv($('.d'));
    animateDiv($('.e'));
    animateDiv($('.f'));
    animateDiv($('.g'));
    animateDiv($('.h'));
    animateDiv($('.i'));
    animateDiv($('.j'));
    animateDiv($('.k'));
    animateDiv($('.l'));
    animateDiv($('.m'));
    animateDiv($('.n'));
    animateDiv($('.o'));
    animateDiv($('.p'));
    animateDiv($('.q'));
    animateDiv($('.r'));
    animateDiv($('.s'));
    animateDiv($('.t'));
    animateDiv($('.u'));
    animateDiv($('.v'));
    animateDiv($('.w'));
    animateDiv($('.x'));
    animateDiv($('.y'));
    animateDiv($('.z'));
    });

    function makeNewPosition($container) {

    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

    }

    function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
  top: newq[0],
  left: newq[1]
}, speed, function() {
  animateDiv($target);
});

    };

    function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.055;

var speed = Math.ceil(greatest / speedModifier);

return speed;

    }


    #container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    }

    div.a,
    div.b,
    div.c,
    div.d,
    div.e {
    left: 34%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 72px;
    background-color: transparent;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    div.f,
    div.g,
    div.h,
    div.i,
    div.j {
    left: 32%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 72px;
    background-color: transparent;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    div.k,
    div.l,
    div.m,
    div.n,
    div.o {
    left: 30%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 72px;
    background-color: transparent;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    div.p,
    div.q,
    div.r,
    div.s,
    div.t {
    left: 28%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 72px;
    background-color: transparent
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    div.u,
    div.v,
    div.w,
    div.x,
    div.y,
    div.z {
    left: 26%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 72px;
    background-color: transparent;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    @media screen and (orientation: portrait) {

    div.a,
    div.b,
    div.c,
    div.d,
    div.e {
    left: -5%;
    }

    div.f,
    div.g,
    div.h,
    div.i,
    div.j {
    left: -6%;
    }

    div.k,
    div.l,
    div.m,
    div.n,
    div.o {
    left: -7%;
    }

    div.p,
    div.q,
    div.r,
    div.s,
    div.t {
    left: -8%;
    }

    div.u,
    div.v,
    div.w,
    div.x,
    div.y,
    div.z {
    left: -9%;
    }
    }

谢谢！

javascript html jquery-animate
1个回答
2
投票
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.