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

首先布局，布局很简单

<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. java判断字符串String中是否存在中文

    public class IsContainChinese { public static boolean isContainChinese (String str){ boolean flag=tr ...

  2. Android 获取浏览器当前分享页面的截屏

    Android 获取浏览器当前分享页面的截屏 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/BrowserScreenShotActivity 文中 ...

  3. vpn安装

    尾戒0717   centos 6.5 openvpn 安装 安装环境: 系统:centos 6.5 openvpn:openvpn-2.2.1 lzo:lzo-2.09    下载地址:http:/ ...

  4. jQuery与CheckBox的值一致就选中

    var area = data.area;//area的形式是1,2,3, area = area.substring(1,area.length-1);//1,2,3 var arr = new A ...

  5. Tomcat使用Memcached Session Manager管理Session

    Tomcat使用Memcached Session Manager管理Session 废话不多说,直接进入主题.项目使用阿里云负载均衡+ECS服务器集群进行部署,Tomcat使用8.5版本.阿里云负载 ...

  6. Node.js~在linux上的部署~外网不能访问node.js网站的解决方法

    这是上一篇node.js部署到linux上的后续文章,当我们安装完node.js之后,建立了sailsjs的网站,然后在外面电脑上无法访问这个网站,这个问题我们如何去解决? 解决思路: 查看linux ...

  7. 用php做省份的三级联动 附带数据库

    可以把它做成小插件的形式,以后需要,可以随时调 来看一下怎么来做 先来写个div然后,再引入js包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 【SysML】用例图

    引言 对于系统工程师来说,设计用例图是一种极为常见的建模活动.用例图是一种黑盒视图,通过向读者传递一系列的用例以及相关的参与者,对系统对外提供的服务或系统具备的行为进行建模.在详细讨论SysML的用例 ...

  9. Contains Duplicate leetcode

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  10. wemall app商城源码中实现带图片和checkbox的listview

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享其中实现带图片和checkbox的listvi ...