隨機飄落一些花瓣，那么這種效果用代碼怎么實作的呢，下面小編給大家詳解jquery實作網頁背景花瓣隨機飄落特效，需要的朋友可以參考下
飄花效果的實作——效果圖：
需求：
一個jquery，，，這個看標題么就知道了
jQuery Transit還有這個東西
http://github.com/rstacruz/jquery.transit
jquery對一些效果的擴展
飄花的效果稍微復雜一點，有一定量的JavaScript代碼，通過JS+CSS3的組合實作的，觀察右邊效果，可以大致分解飄花的實作
飄花比人物的層級都高
飄花數量非常多
飄花會有一定的軌跡運動
飄花帶有漸變的效果
飄花帶有旋轉的效果
飄花落到地面會消失
這里采用的JS+CSS3的結合實作，CSS3實作旋轉部分，首先從布局上來說，飄花是要比所有內部元素層級都要高，所以布局上是要與頁面li平級才可以
實作原理：
通過定時器呼叫JS代碼不斷的動態創建雪花節點，隨機選擇一個圖片作為其背景，賦予三個初始的樣式屬性top,left與opacity，通過transition影片過度的方式執行這3個屬性的影片變化，整個原理其實也是很簡單的，主要涉及了一些細節的問題：例如元素的創建、圖片的隨機、開始的left與opacity的隨機處理、最終值的計算等等
執行的流程：
getImagesName隨機6張圖片，snowflakeURl定義一個地址的范圍
createSnowBox創建雪花元素的節點，并且增加一個snowRoll的樣式，也就是旋轉的關鍵幀實作
定時器設定200ms不斷的生成雪花物件，計算出3個屬性的初始值，通過createSnowBox創建雪花元素，并且附上初始值，然后執行transition附上最終值，執行影片
影片結束后執行$(this).remove() 洗掉這個物件
然后精簡一下代碼，因為我只要飄花效果
<div id='content'>
<!-- 飄花 -->
<div id="snowflake"></div>
</div>
獲取外面#content的寬高
然后#snowflake里面做效果
#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }
然后么css么就是這樣了，top：42px是因為我的導航高度
#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
@-webkit-keyframes mysnow { 0% {
bottom: 100%;
}
50% {
-webkit-transform: rotate(1080deg);
}
100% {
-webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
@-moz-keyframes mysnow { 0% {
bottom: 100%;
}
50% {
-moz-transform: rotate(1080deg);
}
100% {
-moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
這里是給飄花加旋轉之類的css3特技
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://www.cnblogs.com/KillBugMe/p/xxx/js/jquery.transit.js"></script>
<script type="text/javascript">
$(function() {
var snowflakeURl = [
'img/timg.jpg',
'img/timg.jpg',
'img/timg.jpg',
'img/timg.jpg',
'img/timg.jpg',
'img/timg.jpg',
] //js設定陣列存盤6張花瓣的圖片
var container = $("#content");
visualWidth = container.width();
visualHeight = container.height();
//獲取content的寬高
///////
//飄雪花 //
///////
function snowflake() {
// 雪花容器
var $flakeContainer = $('#snowflake');
// 隨機六張圖
function getImagesName() {
return snowflakeURl[[Math.floor(Math.random() * 7)]];
}
// 創建一個雪花元素
function createSnowBox() {
var url = getImagesName();
return $('<div />').css({
'width': 41,
'height': 41,
'position': 'absolute',
'backgroundSize': 'cover',
'zIndex': 100000,
'top': '-41px',
'backgroundImage': 'url(' + url + ')'
}).addClass('snowRoll');
}
// 開始飄花
setInterval(function() {
// 運動的軌跡
var startPositionLeft = Math.random() * visualWidth - 100,
startOpacity = 1,
endPositionTop = visualHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
duration = visualHeight * 10 + Math.random() * 5000;
// 隨機透明度，不小于0.5
var randomStart = Math.random();
randomStart = randomStart < 0.5 ? startOpacity : randomStart;
// 創建一個雪花
var $flake = createSnowBox();
// 設計起點位置
$flake.css({
left: startPositionLeft,
opacity: randomStart
});
// 加入到容器
$flakeContainer.append($flake);
// 開始執行影片
/* $flake.transition({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.7
}, duration, 'ease-out', function() {
$(this).remove() //結束后洗掉
}); */
//jquery 不引入其他js寫法
$flake.animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.7
}, duration, 'linear', function() {
$(this).remove() //結束后洗掉
});
}, 200);
}
snowflake()
//執行函式
})
</script>
以上代碼就是本文使用jquery實作網頁背景花瓣隨機飄落特效，希望大家喜歡，
文章來自：https://www.jb51.net/article/71166.htm
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145147.html
標籤：JavaScript
上一篇：JS中的四大繼承方案