Question

此脚本的主要目的是：

精确调整大小
画布像＆＃39;动画流畅度
不会干扰网页中的任何其他内容，其他脚本，布局等

所有这些都是在最新版本的Chrome和Opera中实现的。 Firefox挣扎着太多的明星，200多个，但是足够了。然而，令人惊讶的是，资源管理器并不是在打球。我惊讶地说，因为当我上次编写脚本时，就在10多年前，IE在动画中统治了。

我对IE的问题是即将到来的明星的不稳定扩张

到目前为止，我已尝试过：

scale，scale3d和height / width px
requestAnimationFrame和setTimeout variants
使用图像代替div
删除不透明度
降低毫秒循环速度和星数
删除任何背景，渐变等

以上都没有解决问题。

是我的旧时代脚本还是资源管理器或两者兼而有之？

此外，该脚本仅用于娱乐，因此没有向后兼容性规定。

提前感谢您的任何答案。

＆＃13;

(function () {

/* Starfield 2004 kurt.grigg@yahoo.co.uk (Updated) */

var v = 1.0; // Star speed
var m = 10; // Max speed 
var n = 300; // Star No
var r = 5; // 1 in 'r' stars to inner field 

//End config.

var con, dir, star, trns;
var d = document;
var cols = ['#ff6e0d', '#c4ffe8', '#fff000', '#fff56e', '#00ddff', '#ffffff'];
var depth = 2000;
var deg = 180 / Math.PI;
var rad = Math.PI / 180;
var cony = 0;
var conx = 0;
var mls = 1000 / 60;
var ini = performance.now();
var strs = [],
    starCoords = [];
var xyo = -(50 / 7);

con = d.createElement('div');
con.setAttribute('style', 'display:block;'
    +'position:absolute;' 
    +'top:0px;left:0px;'
    +'height:100%;width:100%;'
    +'margin:0px;padding:0px;'
    +'overflow:hidden;'
    +'visibility:hidden;');
d.body.appendChild(con);

for (var i = 0; i < n; i++) {
    var col = cols[Math.random() * cols.length | 0];
    strs[i] = d.createElement('div');
    strs[i].setAttribute('style', 'display:block;'
        +'position:absolute;'
        +'height:200px;'
        +'width:200px;'
        +'margin-top:-100px;'
        +'margin-left:-100px;'
        +'background-color:' + col + ';' 
        +'border-radius: 50%;'
        +'visibility:visible;');
    con.appendChild(strs[i]);
}

dir = d.createElement('div');
dir.setAttribute('style', 'display:block;'
    +'position:absolute;'
    +'bottom:0;right:0;'
    +'margin:3px;'
    +'height:auto;width:auto;'
    +'border:1px solid #fff;'
    +'padding:5px;letter-spacing:1px;'
    +'font:11px Verdana,Courier new;'
    +'text-align:center;color:#fff;'
    +'cursor:n-resize;opacity:0.2;'
    +'visibility:visible;');
con.appendChild(dir);
dir.innerHTML += 'Mouse Wheel<br>Velocity<br>Direction';

function scrl(a) {
    var y, x;
    y = window.pageYOffset;
    x = window.pageXOffset;
    return (a == 0) ? y : x;
}

function iniscrl() {
    con.style.top = cony + scrl(0) + 'px';
    con.style.left = conx + scrl(1) + 'px';
}

function Trnsfrm(e) {
    var t = 'Transform';
    var v;
    var vo = [t, 'Webkit' + t, 'ms' + t, 'Moz' + t, 'O' + t];
    while (v = vo.shift()) {
        if (typeof e.style[v] != 'undefined') {
            return v;
        }
    }
    return false;
}
trns = Trnsfrm(d.body);

function initCoords() {
    for (var i = 0; i < n; i++) {
        star = {
            x: coords(1),
            y: coords(2),
            z: coords(),
            o: 0
        };
        starCoords.push(star);
        star.o = 1 - (0.8 * star.z / depth);
    }
}

function coords(a) {
    var rnd = Math.floor(Math.random() * r);
    var sel = (rnd == 0) ? 2.5 : 1.4;
    var xyz;
    if (a == 1) {
        xyz = 50 + Math.random() * 50 / sel *
            Math.sin(Math.random() * deg);
    } else if (a == 2) {
        xyz = 50 + Math.random() * 50 / sel *
            Math.cos(Math.random() * deg);
    } else {
        xyz = Math.random() * depth;
    }
    return xyz;
}

function animateCoords() {
    for (var i = 0; i < n; i++) {
        star = starCoords[i];
        star.z -= v;
        if (v >= 0) {
            if (star.z < 0) {
                star.z = depth;
                star.x = coords(1);
                star.y = coords(2);
                star.o = 0;
            }
            if (star.o < 1) {
                star.o += (v / 1000);
            }
        } else if (v < 0) {
            if (star.z > depth) {
                star.z = -1;
                star.x = coords(1);
                star.y = coords(2);
                star.o = 1.0;
            }
            if (star.z > 1000) {
                star.o += (v / 1100);
            }
        }

    }
}

function assignCoords() {
    var xpos, ypos, dims, theStars;
    for (var i = 0; i < n; i++) {
        star = starCoords[i];
        theStars = strs[i];
        xpos = xyo + (star.x - 50) * (depth / star.z) + deg;
        ypos = xyo + (star.y - 50) * (depth / star.z) + deg;
        dims = (1 * (depth / star.z)) / 130;
        theStars.style[trns] = 'translate3d(' + (xpos) +
            'vw, ' + (ypos) + 'vh, 0) scale3d(' + dims + ', ' +
            dims + ', 1)';
        theStars.style.opacity = star.o;
        theStars.style.zIndex = Math.round(-star.z);
    }
}

function mouseCon(e) {
    var tmp = (e.detail) ? -e.detail / 3 : e.wheelDelta / 120;
    var inc = (tmp >= 0) ? 0.5 : -0.5;
    v += inc;
    if (v < -m) {
        v += 0.5;
    }
    if (v > m) {
        v -= 0.5;
    }
    e.preventDefault();
}

function draw() {
    var now = performance.now();
    if ((now - ini) > (mls)) {
        animateCoords();
        assignCoords();
        ini = performance.now();
    }
    window.requestAnimationFrame(draw);
}

function init() {
    initCoords();
    assignCoords();
    draw();
}

dir.onmouseout = function () {
    dir.style.opacity = 0.2;
};
dir.onmouseover = function () {
    dir.style.opacity = 1;
};

dir.addEventListener('mousewheel', mouseCon, false);
dir.addEventListener('DOMMouseScroll', mouseCon, false);
window.addEventListener("scroll", iniscrl, false);
window.addEventListener("load", init, false);

})();

＆＃13;

        html {
            height: 100%;
        }
        
        body {
            background-color: #000005;
        }

＆＃13;

最新资源管理器中的非画布JavaScript Starfield动画不流畅

0 个答案: