本次的效果大概为当用户点击网页时，网页下方弹出一个类似烟花的长条条，然后在桌面上散开以达成类似烟花的特效。话不多说先上图。

首先布局，布局很简单

<style>

body { background:#000; overflow:hidden;}

</style>

接着js部分，主要以JQ为主

<body>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

 $(function(){

     $(document).click(function(e){

         var _div=$("<div></div>");

         _div.css({width:"4px",height:"30px",backgroundColor:"red",position:"absolute"});

         $("body").append(_div);

         var t=$(window).height();

         var l=e.clientX;

         var g=e.clientY;

         var m=$(window).width();

         var Timer=[];

         _div.css({top:t,left:l});

        _div.animate({top:g},300,function(){

            _div.remove();

            var i=0;

            var sp_div=[];

            for(i=0;i<50;i++){

                sp_div[i]=$("<div></div>");

                sp_div[i].css({width:"2px",height:"2px",position:"absolute",top:g,left:l,backgroundColor:"green"});

                $("body").append(sp_div);

                sp_div[i].speedX=Math.random()*20-10;

                sp_div[i].speedY=Math.random()*20-10;

                }

        setInterval(function(){

                var j=0;

                for(j=0;j<50;j++){

                    if(!sp_div[j]) continue; //跳过当前这个，继续下一个

                    sp_div[j].css({left:sp_div[j].position().left+sp_div[j].speedX,top:sp_div[j].position().top+sp_div[j].speedY});

                    sp_div[j].speedY=sp_div[j].speedY+1;

                if(sp_div[j].position().top>t || sp_div[j].position().left<0 || sp_div[j].position().left>m ){

                    sp_div[j].remove();

                    sp_div[j]=null;

                    }    

                    }

                },30)

            });

         });

     });

</script>

最后给烟花上色,自制的随机16进制颜色，代码可以封装直接调用。

	 function getColor(){

		 var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";

		 var colorArray=colorValue.split(",");

		 var _color="#";

		 for(var i=0;i<6;i++){

			 _color+=colorArray[Math.floor(Math.random()*16)]

			 }

			 return _color;

		 }

JQ实战一之烟花的更多相关文章

  1. jq实战-表单验证

    作为学习的记录,方便大家查看,废话不多说,直接上代码 html 结构: <form action="a.php" method="" class=&quo ...

  2. JQ实战天猫淘宝放大镜

    这个特效平时生活中很常见,话不多说先上效果图. 首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的shade. <style> * { margin:0px; padding:0p ...

  3. jQuery精华

    第一章:入门 选择元素: $() css() $("li").css():可以省略原生的循环操作 $ == jQuery jQuery方法函数化: click() html() J ...

  4. JS系列：js节点

    节点(node) 在html文档中出现的所有东西都是节点 元素节点(HTML标签) 文本节点(文字内容) 注释节点(注释内容) 文档节点(document) … 每一种类型的节点都会有一些属性区分自己 ...

  5. 接口测试 Mock 实战(二) | 结合 jq 完成批量化的手工 Mock

    因为本章的内容是使用jq工具配合完成,因此在开始部分会先花一定的篇幅介绍jq机器使用,如果读者已经熟悉jq,可以直接跳过这部分.先来看应用场景,App 经常会有一些信息展示的列表页,比如商家的菜品.股 ...

  6. 接口测试 Mock 实战 | 结合 jq 完成批量化的手工 Mock

    本文霍格沃兹测试学院学员学习实践笔记. 一.应用背景 因为本章的内容是使用jq工具配合完成,因此在开始部分会先花一定的篇幅介绍jq机器使用,如果读者已经熟悉jq,可以直接跳过这部分. 先来看应用场景, ...

  7. Web 前端实战：JQ 实现树形控件

    前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...

  8. Web 前端实战：JQ 实现下拉菜单

    实现过程 实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件.将用到 CSS 绝对定位.流式布局.动画等:JQuery 鼠标移入和移出事件.DOM 查找.效果图如下: HTML 结构: <div ...

  9. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

随机推荐

  1. 什么是Bootstrap？

    简介 - 框架:库 lib library- jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式- 把大家都需要的功能预先写好到一些文件 这就是一个框架- Bootstrap 让我们的 ...

  2. Javascript—①你好，世界！

    新手Perfect教程之Javascript教程①-你好,世界! 前言:不知道Javascript是什么东东的自行度娘或google一下 Javascript在html<head>和< ...

  3. javascript小测试

     测试地址:http://toys.usvsth3m.com/javascript-under-pressure/ 在群里看到测试网站做着玩,希望你能过关,不能,且看下面答案(为了过关,不惜不够严谨) ...

  4. C#推送RTMP到SRS通过VLC进行取流播放！！

    前面一篇文章简单的介绍了下如何利用SRS自带的播放地址进行观看RTMP直播流,也就是说是使用SRS的内置demo进行Test,但是进行视频直播肯定不可能使用那样的去开发,不开源的东西肯定不好用.由于在 ...

  5. Codeforce 水题报告(2)

    又水了一发Codeforce ,这次继续发发题解顺便给自己PKUSC攒攒人品吧 CodeForces 438C:The Child and Polygon: 描述:给出一个多边形,求三角剖分的方案数( ...

  6. 操作符、语句、函数——Javascript高级程序设计

    1.操作符 一元操作符:++.--放在变量前后的区别,+.—表示正负 位操作符:64位存储.32位计算,对NOT.AND.OR.XOR.<<.>>.>>>的掌 ...

  7. 【SysML】模块定义图(BDD, Block Definition Diagram)

    一.引言 SysML中的模块定义图,英文为 “Block Definition Diagram”,简称BDD,是系统建模过程中最为常见的图之一,BDD是一种结构图,它主要对系统的结构组成以及组成元素间 ...

  8. AlloyFinger.js 源码 学习笔记及原理说明

    此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart   ...

  9. cookie 详解 与 封装 实用的cookie

    在WEB前端开发中,cookie是必不可少的,网上也有很多开源的库可以使用,不过我还是想自己总结一下,做个笔记并封装一个实用的库.(1)什么是cookie? 从web 角度 cookie是用于存储信息 ...

  10. Implement Stack using Queues leetcode

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...