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

首先布局，布局很简单

<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. 【翻译】Jay Kreps - 为何流处理中局部状态是必要的

    译者注: 原文作者是 Jay Kreps,也是那篇著名的<The Log: What every software engineer should know about real-time da ...

  2. Hangfire 使用笔记

    “巨人们”的地址 Hangfire Mysql: https://github.com/arnoldasgudas/Hangfire.MySqlStorage 在获取set表数据的sql语句有bug ...

  3. Laravel / Lumen 框架修改 创建时间 和 更新时间 对应字段

    为避免浪费时间--先上解决方案 在Model中重写 CREATED_AT 和 UPDATED_AT 两个类常量就可以了,这两个常量分别是创建时间和更新时间的字段名. ================= ...

  4. （@WhiteTaken）设计模式学习——建造者模式

    Builder模式,也就是建造者模式或者生成器模式,是GoF提出的23种设计模式的一种. 这种模式是用来隐式的创建复合对象而提出来的. 创建复合对象的过程,不在主客户端显示. 下面直接上代码.以修建房 ...

  5. java8-lamba表达式的使用-遁地龙卷风

    (-1)前言 学习lamba表达式是十分重要的,你会发现java变的可爱多了. (0)函数式接口 只有一个方法的接口称为函数式接口 JButton jButton = new JButton(&quo ...

  6. 5_jQuery选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/stric ...

  7. C# 控制台倒计时

    年前经常聊天的大佬群里有人写了窗体的倒计时来计算下班时间和放假时间:) 简直就是在嘲讽我这种没有工作的人,哈哈哈 窗体的倒计时相当的没有技术含量,主要是不够炫酷,不能够体现我们程序员的身份. 那什么才 ...

  8. nodejs 代码设计模式1：同步函数变异步

    同步函数变异步 1 问题: 1.1 碰到需要调用你刚正在创建的对像. function createServer(data, cb) { data.num = 1; cb(); return data ...

  9. C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC（上）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...

  10. 淘宝API调用 申请 获取session key

    在调用淘宝的API时,我们都会用到appkey,appsecret,appsession. 1.我们申请应用就会有appkey和appsecret了 2.正式环境下获取SessionKey 注意:we ...