小碼哥網頁UI培訓課程之花瓣飄落效果
簡介:
我們常常看到空間里面鼠標滑過花瓣紛飛的效果,經常能激起大家的少女心。今天我們分享一款花瓣紛飛的*。
技巧:
第一步:在網頁文檔的body結束標簽之前通過script的src屬性引入jquery文件。
第二步:再新建一對script標簽引入jquery-mousestrom.min.js文件。
第三步:再新打一對script標簽在標簽內部進行書寫js如下1
$(function(){
$('.container').mousestorm({
images: ['shubiao/01.png', 'shubiao/02.png', 'shubiao/03.png', 'shubiao/04.png', 'shubiao/05.png'],
//粒子圖片數組。
opacity: [0.3, 0.96], //粒子透明度范圍0.2-0.96。粒子隨機透明度范圍
time: [2000, 3000], //粒子運動的時間2000-3000毫秒
rotate: [360, 1080], //旋轉度數,隨機旋轉
scale: [0.4, 0.8], //粒子縮放范圍 原圖片的倍數0.3-0.7。粒子的隨機大小范圍
diepresent: 0.2, //粒子生長到消失的范圍,屏幕寬度取0.4的倍數。 數值越大粒子運動的越遠,數值越小粒子運動的越近 建議0.4
numpresent: 0.04 //粒子產生數量限制比例 數值越小 創建 的也越小,數值越大創建的也越多建議0.03
});
})
詳細代碼及技巧筆記/forum.php?mod=viewthread&tid=4643&extra=
年齡和學歷,對學習也許會有影響,但在小碼哥北京java培訓機構對夢想的較致追求才是成功的關鍵!青春如此美好,沒空浪費時間120天高薪進化論,蛻變正在發生(聯系電話: 4006648000 地址:廣州市天河區棠下涌東路大地工業區D棟四樓 網 學習交流QQ群:162885462)