jquery效果 窗口弹出案例

原创 2012年03月27日 22:28:31

效果
 
  ①基本效果:show()、hide()、toggle()

 ②滑动 slideDown()、slideUp()、slideToggle()

    划上:$("p").slideUp("slow");
    划下:$("p").slideDown("slow");

    $("p").slideToggle("slow");
    用600毫秒缓慢的将段落滑上或滑下

 ③淡入淡出 fadeIn()、fadeOut()

  
   $("p").fadeIn("slow");//先隐藏掉
   $("p").fadeOut("slow");//在显示出来  

 ④透明度 fadeTo()、

   $("p").fadeTo("slow",0.66); //先隐藏掉
   $("p").fadeTo("slow",0.22);//在显示出来 

 

 

<!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>弹出窗口效果</title>
<style type="text/css">

 .window{
	 width:250px;
	 background-color:#d0def0;
	 padding:2px;
	 margin:5px;
	 position:absolute;
	 display:none;
	 }
	 
 .content{
	 height:150px;
	 background-color:#FFF;
	 padding:2px;
	 font-size:14px;
	 overflow:auto;
	 }

.title{
	padding:2px;
	color:#666;
	font-size:14px;}	 
	 
.title img{
	float:right;
	cursor:pointer;}
</style>

<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">

 
//使用jquery加载事件
 $(document).ready(function (){
	
   //定一些变量
   //获得窗口的高度
     var windowHeight=$(window).height(); 
   //获得窗口的高度
      var windowWidth=$(window).width();
   //获得弹窗的高度
      var popHeight=$(".window").height();
   //获得弹窗的宽度
	  var popWidth=$(".window").width();
   
  
	  
	// function closeWindow(){	  
	   //找到X号图片,加单击事件,并且关闭窗口
	   $(".title img").click(function (){
		   
		   $(this).parent().parent().hide("slow");
		   });	  
		  //}
		  
	 //关闭窗口
	//closeWindow();
	  
	//获取延迟时间
	   var timeoutCenter; 
   //定义弹出居中窗口的方法
    function popCenterWindow(){
		
	
		  //获取滚动条滚动的高度	  
	      var scrollTop=$(window).scrollTop();
           //获取滚动条滚动的宽度
          var scrollLeft=$(window).scrollLeft(); 
		
	  clearTimeout(timeoutCenter);
		  
	   timeoutCenter=setTimeout(function(){
	  
		var popY=(windowHeight-popHeight)/2+scrollTop;
		var popX=(windowWidth-popWidth)/2+scrollLeft;
		
		//设定窗口的位置
		//$("#center").css("top",popY).css("left",popX).show("slow");
		$("#center").animate({left:popX,top:popY},300).show("slow");
			
		 
			  },300);
		}	
		
		  	
	$("#btn_center").click(function (){
		
		popCenterWindow();
		//滚动是调用
		 $(window).scroll(function (){
			
			popCenterWindow();
			});
		
		});	
    
	
	
	//获取延迟时间
	   var timeoutLeft; 
	//定义左下角的窗口效果
	 function popLeftButtomWindow(){
		 
		 //获取延迟时间
		  
		    //获取滚动条滚动的高度	  
	      var scrollTop=$(window).scrollTop();
           //获取滚动条滚动的宽度
          var scrollLeft=$(window).scrollLeft(); 
		
		   clearTimeout(timeoutLeft);
		  
		   timeoutLeft=setTimeout(function(){
		
		//计算弹出窗口的左上角Y的偏移量
		var popY=windowHeight-popHeight+scrollTop-10;
		var popX=scrollLeft-10;
		
		//设定窗口的位置
		//$("#left").css("top",popY).css("left",popX).show("slow");
		$("#left").animate({left:popX,top:popY},300).show("slow");
			
		 
			  },300);
		}	
		 
		 
	//单击左下按钮出现	 
	$("#btn_left").click(function (){	   
		
		//滚动是调用
		 $(window).scroll(function (){
			
			popLeftButtomWindow();
			});
			
			popLeftButtomWindow();
		
		});	
		
		
   
     //获取延迟时间
	   var timeoutRight;
     //定义右下角的窗口效果
	 function popRightButtomWindow(){
		 
		 
		    //获取滚动条滚动的高度	  
	      var scrollTop=$(window).scrollTop();
           //获取滚动条滚动的宽度
          var scrollLeft=$(window).scrollLeft(); 
		
		   clearTimeout(timeoutRight);
		  
		   timeoutRight=setTimeout(function(){
			  
			
		//计算弹出窗口的左上角Y的偏移量
		var popY=windowHeight-popHeight+scrollTop-10;
		var popX=windowWidth-popWidth+scrollLeft-10;
		
		//设定窗口的位置
		//$("#right").css("top",popY).css("left",popX).show("slow");
		$("#right").animate({left:popX,top:popY},300).show("slow");
			
		 
			  },300);

		}	
		 
	//单击时出现	
	$("#btn_right").click(function (){
	  
			$(window).scroll(function (){
			
			 popRightButtomWindow();
			});
		 
			 popRightButtomWindow();
		});			
		
 });
</script>
</head>

<body>
 
 
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br>
   <input type="button" id="btn_center" value="弹出居中窗口">
  <input type="button" id="btn_left" value="弹出左下角窗口">
  <input type="button" id="btn_right" value="弹出右下角窗口">

 <div id="center" class="window">  
    <div class="title"><img src="close.jpg">CSDN欢迎您!-居中窗口</div>   
    <div class="content">3gput.com,都来吧</div> 
 </div>
 
 
 <div id="left" class="window">   
    <div class="title"><img src="close.jpg">CSDN欢迎您!-居左窗口</div>  
    <div class="content">3gput.com,都来吧</div>  
 </div>
 
 
 <div id="right" class="window">
    <div class="title"><img src="close.jpg">CSDN欢迎您!-居右窗口</div>   
    <div class="content">3gput.com,都来吧</div> 
 </div>
 
 
 
 
</body>
</html>


 


jQuery mouseover弹出title以及弹出大图的例子

文字提示     body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; colo...
  • andrewleeeeee
  • andrewleeeeee
  • 2013年11月17日 21:29
  • 1045

JQuery鼠标经过弹出气泡框的js特效效果

Animated Menu Hover 1 $(document).ready(function(){ $(".menu li").hover(function() { $(this)....
  • rzg813
  • rzg813
  • 2014年07月07日 18:51
  • 2186

js 弹出全屏窗效果

js 弹出全屏窗效果,css代码,div代码和js代码结合起来实现的一个效果。
  • cjp222
  • cjp222
  • 2015年03月26日 18:57
  • 1331

用jQuery实现弹出窗口弹出div层

通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击;无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中;点击页面...
  • samruo
  • samruo
  • 2017年01月09日 16:06
  • 3741

jQuery弹出窗口完整代码

参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html,  稍作整理如下: jQuery弹出窗口 .window...
  • zhulei632
  • zhulei632
  • 2015年01月08日 14:56
  • 4776

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过z-index:9998;z-index:9999;值越大越在前面index.html jquery点击弹出登陆窗口 jQ...
  • jethai
  • jethai
  • 2016年08月28日 14:05
  • 1591

JQuery+JQuery ui实现的弹出窗口

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>DOCTYPE...
  • xue_feitian
  • xue_feitian
  • 2011年06月10日 11:16
  • 16342

点击按钮弹出表单对话框带透明遮罩

使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记,设置 modal 选项为 true,并通过 buttons 选项来指定主要的和次要的用户动作 1. 按钮 2....
  • u012843873
  • u012843873
  • 2016年12月07日 14:19
  • 2608

js弹出独立窗口

//关闭,父窗口弹出对话框,子窗口直接关闭    this.Response.Write("window.close();");      //关闭,父窗口和子窗口都不弹出对话框,直接关闭    th...
  • u011518709
  • u011518709
  • 2013年07月27日 17:44
  • 1157

使用jQuery实现DIV弹出效果

 现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这个流行元素加入到自己的项目中。使用jQuery可以不费大力气实现这种效果。将其记录到我的Blog中,与业界朋友们起分享。 先上个效果图,可...
  • chris_mao
  • chris_mao
  • 2009年06月03日 11:23
  • 12020
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery效果 窗口弹出案例
举报原因:
原因补充:

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