<!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、最大化