<!DOCTYPE html>
<html>
<title>Demo - 4 Resize 执行多次</title>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ba-resize.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#_total").hide();
$("#_total").fadeIn(3600);
$(window).resize(function(){
var _width = document.documentElement.clientWidth;
var _height = document.documentElement.clientHeight;
var w = _width - 960;
var h = _height - 600;
//alert(w);
if (w > 0) {
w = w/2;
w+= "px";
$("#_total").css("margin-left", w);
}
if(w < 0) {
$("#_total").css("margin-left", "0px");
}
if (h > 0) {
h = h/2;
h+="px";
$("#_total").css("margin-top", h);
}
if (h < 0) {
$("#_total").css("margin-top", "0px");
}
});
//网页可见区域宽：
var width = document.documentElement.clientWidth;
//网页可见区域高：
var height = document.documentElement.clientHeight
var n = height - 600;
if (n > 0) {
n = n / 2;
n += "px";
$("#_total").css("margin-top",n);
}
if (n < 0) {
$("#_total").css("margin-top","0px");
height += "px";
$("#_total").css("height",height);
}
var aw = width - 960;
//alert(aw);
if (aw > 0) {
aw = aw/2;
aw += "px";
$("#_total").css("margin-left", aw);
//$("#_total").css("margin-right", aw);
}
if (aw < 0){
$("#_total").css("margin-left", "0px");
}
});
</script>
<style type="text/css">
#_back{
border:#F00 1px solid;
z-index:0;
text-align:center;
padding:0px 0px 0px 0px;
}
#_total {
width:960px;
height:600px
border: 1px solid black;
position: relative;
padding:0px 0px 0px 0px;
}
#_mag {
width:960px;
height:600px
padding:0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="_total">
<div id="_back">
<img id="_mag" src="images/1.jpg"/>
</div>
</div>
</body>
</html>
评论10
最新资源