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>


 


相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery 仿QQ校友的DIV弹出窗口效果

  • 2010年06月26日 09:48
  • 28KB
  • 下载

jQuery 弹出窗口一直居中详细案例

jQuery弹出框 .div_back{ display:none; position:fixed; z-index:9998; top:0; left:0; width: 100%;...

Jquery制作窗口弹出效果(转)

今天给大家带来的是,实用jQuery技术实现各种弹窗效果,比如弹出指定位置的窗口(左下角、右下角、居中...)等,尤其是弹出右下角窗口特别实用,如果能够跟随滚动条一起滚动,那就非常good了!一些企业...

jQuery实现弹出居、右下角、左下角窗口效果(一)

今天给大家带来的是,实用jQuery技术实现各种弹窗效果,比如弹出指定位置的窗口(左下角、右下角、居中...)等,尤其是弹出右下角窗口特别实用,如果能够跟随滚动条一起滚动,那就非常good了!一些企业...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

jquery实现弹出窗口效果

用jquery实现图片任意点击,到任意地方去,很好用也很好看的效果 弹出窗口效果 .window{ width:250px; background-color:#d0def0; pos...

Jquery教程:JS弹出窗口DIV层效果代码

转载自 分享   使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显 示它们。这种效果不仅能够充分...

jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

jQuery弹出窗口的效果

jQuery弹出窗口的效果 在许多网站上我们都可以看到当你浏览一个网页的时候会自动的弹出一个窗口,窗口的位置可以在中间,在左边或者是在右边。那么好的,我们来开始分析一下吧! 一 思路 1.d...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery效果 窗口弹出案例
举报原因:
原因补充:

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