jquery效果 窗口弹出案例

时间：2021-11-17 08:05:25

 

 

效果

①基本效果: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="jquery.min.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>

 

标签：

相关文章