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

首先布局，布局很简单

<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. oracle 游标的使用

    额,一直提起游标就头疼,总感觉是很高大上的东西,望而却步... 今天要做的东西涉及到了实时更新数据,要用到JOB 存储过程  游标 通过在网上查资料,请教同事,也开始继续深入oracle,,,,小菜啊 ...

  2. 强化学习读书笔记 - 02 - 多臂老O虎O机问题

    # 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...

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

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

  4. Visual Studio 2013 百度云下载地址

    Visual Studio 2013 百度云下载地址 链接:http://pan.baidu.com/s/1sjFifox 密码: ipqe VS2013注册码:BWG7X-J98B3-W34RT-3 ...

  5. 移动OA日程支持费用及评论

    业务介绍 AIO7系统最新更新版本在移动OA的日程管理进行改进,增加了创建费用的功能,且在日程批注上也可查看:在日程个人界面和批注界面都支持了评论功能.移动OA上日程对费用及评论的支持,方便用户外出时 ...

  6. 关于java socket

    1. 关于new Socket()中参数的理解 Server端: 调用ServerSocket serverSocket = new ServerSocket(1287,2);后Server端打开了指 ...

  7. TableView 多余分割线的处理

    方法一,以下两个方法的实现 - (void)viewDidLoad { [super viewDidLoad]; self.tableView.tableFooterView = [[UIView a ...

  8. String to Integer (atoi) leetcode

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  9. KoaHub平台基于Node.js开发的Koa JWT认证插件代码信息详情

    koa-jwt Koa JWT authentication middleware. koa-jwt Koa middleware that validates JSON Web Tokens and ...

  10. 一个很逗的东西——Jd

    这个嘛是本人专门为了NOI上面对拍程序写的对拍程序,已经经历了NOI2015的考验:更重要的是——纯Pascal的哦(HansBug:其实是我不会写.sh脚本TT,谁叫用惯了windows的我只会写b ...