非常漂亮的烟花特效-JS特效-爱易网页

非常漂亮的烟花特效

日期：2014-05-18　浏览次数：20209 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【编程游戏】贺岁放礼花 -- freewind</title>
<style type="text/css">
    html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
    .ball{color:#FF0000; position:absolute; font-size:16px;}
    .star{color:#FF0000; position:absolute; font-size:4px;}
</style>
<script type="text/javascript">
function Fireworks(sky, loop){
    this.sky = sky;
    this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
    this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
    this.x = this.y = 0;
    this.step = 20;
    this.delay = 30;
    this.stars = [];
    this.r = 10;
    this.step2 = 7;
    this.radius = 90;
    this.angle = 45;
    this.num = 16;
    this.loop = loop;
    this.degree = 2;
    this.t = 0;
    this.delt = 0;
    this.max = 30;
    this.cur = 1;
    this.points = null;
}
Fireworks.prototype = {
    init : function(){
        this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;
        this.y = this.skyHeight;
        this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
    },
    setOpacity : function(obj, p){
        if(p > 85){
            var opacity = 100 - (p - 85) * 4;
            if(document.all){
                obj.style.filter = "alpha(opacity=" + opacity + ")";    
            }else{
                obj.style.MozOpacity = opacity / 100;
            }
        }
    },
    getNextPoint : function(degree, coeff, t){
        var tt = 1.0 - t;
        for(var rr = 1; rr <= degree; rr++){
            for(var i=0; i <= degree-rr; i++){
                coeff[i] = tt * coeff[i] + t * coeff[i+1];
            }
        }
        return coeff[0];
    },
    showBall : function(){
        this.ball = document.createElement("div");
        this.ball.innerHTML = "●";
        this.ball.className = "ball";
        this.ball.style.left = this.x + "px";
        this.ball.style.top = this.y + "px";
        this.sky.appendChild(this.ball);
    },
    moveBall : function(){
        var self = this;
        if(this.y > this._y){
            var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
            this.y -= (this.step - p * 1.6);
            this.ball.style.fontSize = 16 - p + "px";
            this.ball.style.top = this.y + "px";
            setTimeout(function(){self.moveBall();}, this.delay);
        }else{
            this.fire();
        }
    },
    hideBall : function(){
        this.sky.removeChild(this.ball);
        this.ball = null;
    },
    showStars : function(){
        var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];
        var n = cs = parseInt(Math.random() * colors.length / 2);
        var cc = parseInt(Math.random() * colors.length  / 2);
        var colorMode = parseInt(Math.random() * 2);
        var star = Math.round(Math.random()) == 1 ? "★" : "☆";
        this.r = 10;
        this.radius = Math.round(Math.random() * 30) + 60;
        this.num = Math.round(Math.random() * 5 + 5) * 2;
        this.angle = 180 / this.num * 2;
        
        for(var i=1; i<=this.num; i++){
            this.stars[i] = document.cre</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="2664">下一篇：表单验证Validator3.0 by 我佛山人</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34164' title='手游市场乱象丛生 受资本热捧野蛮成长' target="_blank">
                        手游市场乱象丛生 受资本热捧野蛮成长</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34162' title='Skype周年：与微软联姻到底有没有未来？' target="_blank">
                        Skype周年：与微软联姻到底有没有未来？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34261' title='美图手机2问世 三大问题令其市场销量堪忧' target="_blank">
                        美图手机2问世 三大问题令其市场销量堪忧</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34250' title='微信将商场O2O战火烧到了阿里巴巴老家' target="_blank">
                        微信将商场O2O战火烧到了阿里巴巴老家</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34165' title='魅族黄章惹怒芙蓉姐姐 将跨界推女神手机' target="_blank">
                        魅族黄章惹怒芙蓉姐姐 将跨界推女神手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10819' title='网易云音乐能否为丁磊拿到移动互联网门票？ ' target="_blank">
                        网易云音乐能否为丁磊拿到移动互联网门票？ </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6901' title='诺基亚再缩阵线 封锁上海旗舰店全力蜕变' target="_blank">
                        诺基亚再缩阵线 封锁上海旗舰店全力蜕变</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34328' title='小微型IDC云化趋势加剧 云计算未来或现终极模式' target="_blank">
                        小微型IDC云化趋势加剧 云计算未来或现终极模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者：远不及现实荒诞？' target="_blank">
                        美剧讲硅谷创业者：远不及现实荒诞？</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2024 爱易网页 当前在线：222人　
        网站在4时23分1秒内访问总人数：59085人
    当前 8.78%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>