JQuery实现最大化和最小化【对css控制以及获取屏幕大小等】 

 <!doctype html>
 <html charset="en">
 <head>
 <meta charset="utf-8"/>
 <title>你好!音乐</title>
 <style type="text/css">
 body{
  white-space:normal; 
  word-break:break-all;
  overflow:hidden;/** 这几句是对所有的子框都做了处理 **/
  text-align:center;
 }
 #music{
 margin:0 auto;
 width:800px;
 height:550px;
 background-color:#9998;
 box-shadow: 10px 10px 20px 10px rgba(0,250,154,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5)
 }
 #mleft{
 width:200px;
 height:500px;
 float:left;
 background-color:rgb(0,191,255);
 }
 #mright{
 width:600px;
 height:500px;
 float:left;
 background-color:rgb(0,250,154);
 }
 #mright .mhead{
  width:600px;
  height:50px;
  background-color:rgb(0,250,154);
 }
 #mright #mbody{
  width:600px;
  height:450px;
  opacity:1;
  background-color:rgb(0,250,154);
 }
 .footer{
 width:800px;
 height:50px;
 float:right;
 background-color:rgb(255,255,0);
 }
  
  #adv{
  width:100%;
  height:50px;
  background-color:rgb(255,165,0);
  position:fixed;
  bottom:0px;
  right:0px;
 }
 </style>
 </head>
 <body>
 <div id="music">
 <!-- 左侧 -->
    <div id="mleft">
        
    </div>
 <!-- 右侧 -->
    <div id="mright">
 <!-- mhead -->
        <div class="mhead">
         
        </div>
<!-- mbody -->    
        <iframe name="mbody" class="mbody" id="mbody" src="https://www.baidu.com" frameborder="0">
        </iframe>
    </div>
<!-- footer -->
    <div class="footer">
    
    </div>
 </div>
 
 <!-- Advertisement广告 -->    
<div id="adv"> 
    <a href="https://www.qq.com" target="mbody"> 腾讯网</a>
    <button id="reduction">还原</button><button id="fullscreen">最大化</button>
</div>
 </body>
 </html>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
 <script type="text/javascript">
 //查看jquery版本，以及是否加载成功，在浏览器调试，控制台输入$.fn.jquery
  //width:600px;
  //height:450px;
  //opacity:1;
  //background-color:rgb(0,250,154);
$(document).ready(function(){
  $("#reduction").click(function(){
    $(".mbody").css({"width":"600px","height":"450px","position":"static"});
    //下面的fixed的样式也要变
    $("#adv").css({"position":"fixed","width":"100%"});
  });
  $("#fullscreen").click(function(){
    $(".mbody").css({"width":$(window).width()+"px","height":$(window).height()+"px","position":"fixed","top":"0px","left":"0px"});
    //下面的fixed的样式也要变
    $("#adv").css({"float":"left","width":"200px","height":"50px"});
  });
});
 </script>
View Code

 

效果：

1、原来的大小：

2、最大化

posted @ 2020-03-04 20:55  CiscoLee  阅读(906)  评论(2)  编辑  收藏  举报