jQuery案例五居中放大
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.5居中放大</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//单击放大一倍，在浏览器中水平居中、垂直居中
$('#mask').click(function(){
var w=$(this).width();
var h=$(this).height();
var w1=$(window).width();
var h1=$(window).height();
var w2=w*2;
var h2=h*2;
var t=(h1-h2)/2;
var l=(w1-w2)/2;
$(this).css({
'width':w2,
'height':h2,
'left':l,
'top':t
});
});
});
</script>
<style>
#mask{
width:100px;
height:100px;
background-color:#F00;
position:fixed;
/*在浏览器中居中显示*/
/* left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;*/
}
</style>
</head>
<body>
<div id="mask"></div>
</body>
</html>
