我已经编写了一个 super 简单的 javascript 来为网站创建水波纹效果,并且这种错觉相当有效,但是我的计时器在许多情况下都滞后了一些问题。最初我尝试使用一些 CSS3 效果来实现,但是渲染元素的计算机会在一段时间后卡住屏幕,所以我重写它以反复更改单个 PNG,这有很大帮助,但仍然陷入困境。我不确定如何改善这个问题,如果使用一些预加载可能有所帮助(对此表示怀疑),或者是否有一些其他优化可以解决一个非常有希望的开始。
这是我的代码:
body{
background-color:#444;
position:absolute;
overflow: hidden;
z-index:0;}
.circle{
position:absolute;
background-image:url(circle5.png);
background-size:cover;
background-repeat:no-repeat;
overflow:hidden;
z-index:2;}
和javascript
var locX = '';
var checkX = '';
var locY = '';
var checkY = '';
var eventTimer = setInterval(function(){changeCs()}, 1);//'FRAMERATE' of state changes in milliseconds
//Listen for user mouse movement, fetch current location of cursor, initiate droplets
document.onmousemove = function(e){
var event = e || window.event;
locX = event.clientX;
locY = event.clientY;
createC();}
//We create divs with the circular image stretched to the otherwise blank div
function createC(){
//Check to see if the X and Y are the same as in previous cycle, if so movement has stopped.
if(parseInt(locX) != parseInt(checkX) && parseInt(locY) != parseInt(checkY)){
var n_Circle = document.createElement('div');
n_Circle.setAttribute('class','circle');
n_Circle.setAttribute('style','width:10px;height:3px;opacity:.4;');
document.body.appendChild(n_Circle);
//We obtain the coordinates of the cursor, and use the same X as the user.
//However with the Y we are shifting downward from the top to maintain illusion of water surface -*THINK EYE LEVEL*
n_Circle.style.top = parseInt(.75 * window.innerHeight) + parseInt(locY * .4) + 'px';
n_Circle.style.left = parseInt(locX) + 'px';
window.setTimeout(function(){createC()},parseInt(Math.random() * 200 + 100));
}else{return;}//EXIT Function loop
//ASSIGN new check values before end ot the cycle
checkX = locX;
checkY = locY;
}
//We manipulate the droplet images by this quantity every 'frame'
function changeCs(){
var arrayCs = document.getElementsByClassName('circle');
for(i=0; i < arrayCs.length; i++){
arrayCs[i].style.width = parseInt(arrayCs[i].style.width) + 100 + 'px';
arrayCs[i].style.left = parseInt(arrayCs[i].style.left) - 50 + 'px';
//The ratio of expansion does not match to the images aspect ratio.
//This helps to create the illusion of depth to the surface deformation
//by shearing a portion of the ellipse away, conveying a sense of depth and angularity
arrayCs[i].style.height = parseInt(arrayCs[i].style.height) + 26 + 'px';
arrayCs[i].style.top = parseInt(arrayCs[i].style.top) - 14 + 'px';
arrayCs[i].style.opacity = arrayCs[i].style.opacity - .01;
if(arrayCs[i].style.opacity <= .00){
document.body.removeChild(arrayCs[i]);}}}
很快就会得到一个 JSFiddle。非常感谢任何想法。
最佳答案
看看这是否有所作为,对我来说这似乎更快,但很难说,因为我对您的期望没有那么细微的差别。 fiddler :http://jsfiddle.net/QNf4K/4/
我不是每次都创建一个 div 元素,而是只创建一次,然后克隆它。 我缓存了长度。
var locX = '';
var checkX = '';
var locY = '';
var checkY = '';
var eventTimer = setInterval(function(){changeCs()}, 1);//'FRAMERATE' of state changes in milliseconds
var ln_Circle = document.createElement('div');
ln_Circle.setAttribute('class','circle');
ln_Circle.setAttribute('style','width:10px;height:3px;opacity:.4;');
// then just cloned it here:
var n_Circle = ln_Circle.cloneNode(true);
// I also cached the length here:
var l = arrayCs.length, i = 0;
for(; i < l; i++){
//然后添加了一个 arrayCs[i] 是否存在的测试
if( arrayCs[i]){
arrayCs[i].style.width = parseInt(arrayCs[i].style.width) + 100 + 'px';
关于Javascript 水波纹效果在帧速率中变慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23944896/