jq模仿雨滴下落的動畫

2022-07-03 19:51:11 字數 740 閱讀 6329

效果如圖：

實現思路：定時器每隔x秒生成寬高、下落速度（即動畫執行時間）、left隨機的div。

1.css：

body.com
2.js:

$(function


()    rain(obj)


})function


rain(obj)


var left=math.random()*maxleft-width;//


隨機left值


left=left.tofixed(2);


if(left<0)


j++;


var speed=math.random()*maxspeed;//


隨機速度


var item='


';//


建立雨滴


move($(".rain"+j),speed);//


雨滴移動


},time)


}function


move(op,speed),speed,


function


());


}
本來最開始想計算雨滴left和下落高度的最大值，以免出現滾動條，但是後來想直接body加個overflow：hidden不是更好麼，省去多餘的**，效果還一樣。

除了用js實現，還可以用canvas來實現。

今天講的是JQ 的動畫效果

老規矩，先貼 doctype html html head meta charset utf 8 title title script src js jquery.js script head style body box button style body button 點選開始動畫 button...

iOS 模仿系統的抖動動畫

模仿系統的抖動動畫，主要用的是cakeyframeanimation 見之前篇博文 和nstimer，不多說直接上 define degreestoradians x m pi x 180.0 左右搖擺的角度 define radius 3.0f define shaketime 0.5 動畫實現 ...

jq實現碰到邊緣反彈的動畫

先上效果圖 錄出來有點卡頓的趕腳，實際上還是挺順暢的。1.html div class box div 2.css body.box3.js function else if sx 1 if x 0 else if x winx if sy 0 else if sy 1 if y 0 else if...