jquery實現煙花效果(面向物件)
阿新 • • 發佈：2020-03-12
本文例項為大家分享了jquery實現煙花效果的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>煙花效果(面向物件)</title>
<style type="text/css">
*{padding: 0;margin: 0}
body{overflow: hidden;width: 100%;height: 100%;background: #000; }
div{position: absolute;background: #000;color: #fff}
</style>
<script src="jquery-1.8.3.min.js"></script></script>
</head>
<body>
<script type="text/javascript">
var firWorks = {
init : function(){ //初始化
var _that = this;
$(document).bind("click",function(e){
_that.eventLeft = e.pageX;
_that.eventTop = e.pageY;
_that.createCylinder();
});
},createCylinder : function(event){ //建立一個花筒
var _that = this;
this.cHeight = document.documentElement.clientHeight;//瀏覽器高度
this.cylinder = $("<div/>");
$("body").append(this.cylinder);
this.cylinder.css({"width":4,"height":15,"background-color":"red","top":this.cHeight,"left":this.eventLeft});
this.cylinder.animate({top:this.eventTop},600,function(){
$(this).remove();
_that.createFlower();
})
},createFlower : function(){ //建立很多很多的煙花哇！！
/*煙花效果
*1.煙花是很多個DIV構成
*2.每個煙花的顏色不一樣
*3.煙花的位置也不一樣
*4.煙花散開方向不一樣
*5.煙花有下墜感覺
*/
//通過迴圈可以建立你想要的煙花啦！！！
var _that = this;
for(var i = 0 ; i < 30; i++ ){
$("body").append($("<div class='flower'></div>"));
};
$(".flower").css({"width":3,"height":3,"top":this.eventTop,"left":this.eventLeft});
$(".flower").each(function(index,element) {
var $this = $(this);
var yhX = Math.random()*400-200;
var yhY = Math.random()*600-300;
_that.changeColor();
$this.css({"background-color":"#"+_that.randomColor,"width":3,"height":3}).animate({"top":_that.eventTop-yhY,"left":_that.eventLeft-yhX},500);//散開
for(var i=0;i<30;i++){
//判斷滑鼠點選時的右邊煙花還是左邊煙花
if(yhX<0){
_that.downPw($this,"+");//右下墜
}else{
_that.downPw($this,"-");//左下墜
}
}
});
},changeColor : function(){
/*煙花的顏色是隨機的，而且是用16進製表示色值，所以用隨機數結合16進位制;
*16進位制的最大值ffffff,轉換成十進位制16777215;
*Math.random()*16777215公式可以得到0-16777215之間的數，因為是小數，所以要用到取整;
*Math.ceil(Math.random()*16777215)生成一個在顏色值範圍內的，隨機的十進位制值;
*Math.random()*9+1公式可以得到1-10之間的數，以此類推
*.toString(16)方法，是把得到的十進位制，轉換成16進位制，也就是隨機的顏色值了;
*/
this.randomColor = "";
this.randomColor = Math.ceil(Math.random()*16777215).toString(16)//;
//當這個產生的隨機的顏色值，不足6位數的進候，需要補齊，又不改變其值，所以要在這個數的前面加零;
while(this.randomColor.length<6){
this.randomColor = "0"+this.randomColor;
}
},downPw : function(ele,type){ //煙花下墜啦 ！！！！
ele.animate({"top":"+=30","left":type+"=4"},50,function(){
setTimeout(function(){ele.remove()},2000);
})
}
};
firWorks.init();
</script>
</body>
</html>更多JavaScript精彩特效分享給大家：
jQuery幻燈片特效彙總
jQuery焦點圖特效彙總
jQuery級聯選單特效彙總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。