jquery插件弹出窗口爆炸效果!

原创 2012年03月28日 21:40:49
<!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=utf-8" />
<title>tabs效果</title>

<!----引入jquery类库文件--->
<script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!----引入css类库文件--->
<link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
	
//当窗体加载完毕的时候 触发该匿名函数
//$(document)   //把dom对象转换成jquery对象---
//$(document).ready(function (){});   jquery方法
		
	$(function (){
		//注册对话框
		$("#dialog").dialog({
			autoOpen:false,	//设置对话框打开方式,不是自动打开
			show:"blind",   //打开时的动画效果
			hide:"explode",	//关闭时的动画效果
			modal:true,		//是否遮罩,true表示遮罩效果,false表示非遮罩
			
			/*buttons:{		//添加按钮的操作
					"确定":function(){
						
						 $(this).dialog("close");  //关闭对话框
							
						},
					"取消":function(){
							
						 $(this).dialog("close");  //关闭对话框
						}
				},*/
			 
			 
			 //效果同上
			 buttons:[
			 	{
				   text:"确定",
				   click:function (){
					   $(this).dialog("close");  
				   } 
				},
				
				{
				   text:"取消",
				   click:function (){
					   $(this).dialog("close");  
				   } 
				
			 }],	
			
			 
			 //是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动  	
			 draggable:true,	
			
			 //是否采用esc键退出对话框,如果false表示不采用,默认值true表示采用
			 closeOnEscape:false,
			
			 //对话框的标题
			 title:"添加用户操作",
			 
			 //对话框弹出位置 top bottom center left right 默认值为center
			 position:"center",
			
			 //对话框宽度
			 width:400,
			 
			 //对话框高度
			 height:200,
			 
			 //是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小
			 resizable:false,
			 
			 //层叠效果
			 zIndex:1000,
			 
			 drag:function(event,ui){
				
					//可以测试出对话框当前的坐标位置
					//alert("sdfsdf");
				}
			 
			 
		});
		
		//触发连接的事件  当你点击 连接打开一个对话框
		$("#dialog_link").click(function (){
		
			$("#dialog").dialog("open");//open参数, 作用是打开对话框
			
		});
		
		
		
		//怎么获取 设置的option中的参数值		
		var modalValue = $("#dialog").dialog("option","modal");
		//alert(modalValue);				
		
		//怎么设置option中的参数值
		$("#dialog").dialog("option","modal",false);
		
	});
			

</script>
<style>
    #dialog_link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;}

	#dialog_link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;}
		

</style>

</head>

<body>

	<h1>模拟dialog效果</h1>
    <!--创建一个连接-->
	<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">点击打开<span class="ui-icon ui-icon-newwin"></span></a>
    
    <!--div 对话框 $("#dialog").dialog(); 就变成了对话框 在页面中就会隐藏-->
    <div id="dialog" title="警告">
       你的电脑即将爆炸!
    </div>
    
</body>
</html>


打开效果:


关闭时的爆炸效果如下:



Unity3D —— 爆炸交互(震屏效果)

前言: 在我们进行游戏战斗场景开发时,常常为了加强临场感,会在有爆炸或者撞击的时候加入震屏的效果,原理其实很简单,就是对场景主相机进行坐标和角度的变化。 设计在开始进行代码实操之前,我们先考...
  • linshuhe1
  • linshuhe1
  • 2017年03月06日 15:35
  • 1261

Unity3D学习笔记08:爆炸效果

Unity3D的刚体Rigidbody下面有个AddExplosionForce函数,查看文档我们得知这个函数是用来添加爆炸力的。爆炸效果在游戏中经常使用到,尤其是射击类游戏。我们通过一个小例子学习一...
  • jukai7
  • jukai7
  • 2013年08月26日 16:23
  • 8590

Android制作粒子爆炸特效

简介最近在闲逛的时候,发现了一款粒子爆炸特效的控件,觉得比较有意思,效果也不错。 但是代码不好扩展,也就是说如果要提供不同的爆炸效果,需要修改的地方比较多。于是我对源代码进行了一些重构,将爆炸流程和...
  • kangaroo835127729
  • kangaroo835127729
  • 2015年12月02日 16:06
  • 28640

js对象爆炸的简单示例

文件上传与对象爆炸的简单案例 var id = 0; startUpload = function( uploadType, files ...
  • Hi_xiexialing
  • Hi_xiexialing
  • 2017年02月07日 08:59
  • 195

基于几何着色器的模型“爆炸”效果(Geometry Shader)【OpenGL】【GLSL】

先贴个效果图先挖个坑,以后再详细填
  • panda1234lee
  • panda1234lee
  • 2017年06月18日 19:30
  • 870

用shader制造火焰与爆炸

-------------------------西昌.何雨锋 用shader制造火焰与爆炸shader文件可以用记事本打开,然后发现其内容大概是这样的:Animations/Flames/flame...
  • hotrainfall
  • hotrainfall
  • 2010年07月07日 14:05
  • 947

android 粒子爆炸特效

最近有个需求,需要在view爆炸的动画,搜索了一下,已经有人做到了类似的动画,我参考了下,改进出自己的爆炸效果。 参考文章:blog.csdn.net/crazy__chen/article/deta...
  • zcsky027
  • zcsky027
  • 2016年09月21日 19:13
  • 1031

基于C#弹幕类射击游戏的实现——(六)爆炸效果

接下来就像填充积木一样,把GameScene里用到的东西一个个写完~~ 先来个最简单的。GameBomb   一目了然 public class GameBomb : GameObject ...
  • UnSkyToo
  • UnSkyToo
  • 2013年12月17日 19:42
  • 2009

Unity3DGame学习笔记(3):爆炸效果

AddExplosionForce函数说明: 在Unity脚本手册中,Rigidbody组件有一个AddExplosionForce方法,能够对一个模拟爆炸效果的刚体施加力量。爆炸被模拟为世界坐标中...
  • m0_37628648
  • m0_37628648
  • 2017年03月30日 17:27
  • 319

openGL es2.0 粒子系统方式之球体爆炸

一、Java代码: package com.gzdxid.particles; import java.nio.FloatBuffer; import com.gzdxid.utils.Buff...
  • sh15285118586
  • sh15285118586
  • 2015年02月11日 16:10
  • 688
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件弹出窗口爆炸效果!
举报原因:
原因补充:

(最多只允许输入30个字)