jquery效果窗口弹出案例

最新推荐文章于 2020-11-26 18:22:42 发布

php398893944

最新推荐文章于 2020-11-26 18:22:42 发布

阅读量1.6k

点赞数

文章标签： jquery function class div button input

本文链接：https://blog.csdn.net/php398893944/article/details/7400940

版权

效果

①基本效果: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>