您的位置：首页 > Web前端 > JQuery
通过CSS，Jquery实现DIV的各种动作(包括漂移，未测试IE6)

2012-07-23 22:58 411 查看
此文实现了如下效果：

jquery获得窗口高宽，文档高宽值。

通过CSS设置，实现DIV置顶，置底，置左，置右，居中。

利用jquery实现DIV四个方向随滚动条，窗体大小浮动。

一个漂浮反弹的DIV。
<!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>
<title>获取窗口高度宽度，DIV置顶，置底，置左，置右，居中，随滚动条居中</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
showwidth_height();
$(window).resize(showwidth_height);
$(window).scroll(movesmallleft);
$(window).resize(movesmallleft);

$(window).scroll(movesmallright);
$(window).resize(movesmallright);

$(window).scroll(movesmalltop);
$(window).resize(movesmalltop);

$(window).scroll(movesmallbottom);
$(window).resize(movesmallbottom);

var ivl = setInterval("floatdiv()", 10); //ivl变量，用来可以使得setInterval停止。通过clearInterval方法。
$("#floatdiv").hover(function () { clearInterval(ivl) }, function () { ivl = setInterval("floatdiv()", 10); });
})

function showwidth_height() {
var s = ""
+ "浏览器当前窗口可视区域高度:" + $(window).height() + "<br/>"
+ "浏览器当前窗口文档的高度:" + $(document).height() + "<br/>"
+ "浏览器当前窗口文档body的高度:" + $(document.body).height() + "<br/>"
+ "浏览器当前窗口文档body的总高度 包括border padding margin :" + $(document.body).outerHeight(true) + "<br/>"
+ "浏览器当前窗口可视区域宽度:" + $(window).width() + "<br/>"
+ "浏览器当前窗口文档对象宽度:" + $(document).width() + "<br/>"
+ "浏览器当前窗口文档body的宽度:" + $(document.body).width() + "<br/>"
+ "浏览器当前窗口文档body的总宽度 包括border padding margin:" + ($(document.body).outerWidth(true)) + "<br/>"
$("#center").html(s);
}

function movesmallleft() {
var topvalue = $(window).height() / 2 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
var leftvalue = 0 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
//这里的stop方法相当必要
//停止正在进行的动画
//因为滚动条滚动的时候，会触发多次scroll事件，每次触发的时候，都做动画影响效率，因此要加上stop方法
//使之立即停止后再做动画。
$("#smallleft").stop().animate({ top: topvalue, left: leftvalue, marginTop: "-10px" }, "slow");
}
function movesmallright() {
var topvalue = 150 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
var rightvalue = 0 - $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
$("#smallright").stop().animate({ top: topvalue, right: rightvalue }, "slow");
}
function movesmalltop() {
var topvalue = 0 + $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
$("#smalltop").stop().animate({ top: topvalue, left: leftvalue }, "slow");
}
function movesmallbottom() {
var bottomvalue = 0 - $(window).scrollTop(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量，就要把这个偏移量加上去。
$("#smallbottom").stop().animate({ bottom: bottomvalue, left: leftvalue }, "slow");
}

var direct = "leftup";
//根据当前方向和偏移量，判断接下来的方向。
function floatdiv() {
var top = $("#floatdiv").offset().top;
var left = $("#floatdiv").offset().left;
//加上偏移量，主要用来处理滚动条的滚动时候对top，left的影响
if (top < 0 + $(window).scrollTop() && direct == "rightup") {
direct = "rightdown";
}
else if (top < 0 + $(window).scrollTop() && direct == "leftup") {
direct = "leftdown";
}
else if (left < 0 + $(window).scrollLeft() && direct == "leftup") {
direct = "rightup";
}
else if (left < 0 + $(window).scrollLeft() && direct == "leftdown") {
direct = "rightdown";
}
//加上div的高度
else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "leftdown") {
direct = "leftup";
}
else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "rightdown") {
direct = "rightup";
}
//加上div的宽度
else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightdown") {
direct = "leftdown";
}
else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightup") {
direct = "leftup";
}

if (direct == "leftdown") {
toptop = top + 1;
leftleft = left - 5;
} else if (direct == "rightdown") {
toptop = top + 1;
leftleft = left + 5;

} else if (direct == "rightup") {
toptop = top - 1;
leftleft = left + 5;

} else if (direct == "leftup") {
toptop = top - 1;
leftleft = left - 5;
}

$("#floatdiv").html(Date());
$("#floatdiv").offset({ "top": top, "left": left })
}

</script>
<style type="text/css">
#top
{
position: fixed;
top: 20px;
left: 0px;
height: 50px;
width: 100%;
background: #666666;
z-index: 6;
text-align: center;
}

#left
{
position: fixed;
top: 50%;
left: 10px;
height: 300px;
width: 100px;
background: #666666;
z-index: 6;
text-align: center;
margin-top: -150px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
}

#smallleft
{
position: absolute;
top: 50%;
left: 10px;
height: 20px;
width: 20px;
background: red;
z-index: 6;
text-align: center;
margin-top: -10px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
}

#smallright
{
position: absolute;
top: 150px;
right: 0px;
height: 20px;
width: 20px;
background: red;
z-index: 6;
text-align: center;
}

#smalltop
{
position: absolute;
top: 0px;
left: 50%;
height: 20px;
width: 20px;
background: red;
z-index: 6;
text-align: center;
}

#smallbottom
{
position: absolute;
bottom: 0px;
left: 50%;
height: 20px;
width: 20px;
background: red;
z-index: 6;
text-align: center;
}

#floatdiv
{
position: fixed;
top: 200px;
left: 300px;
height: 80px;
width: 80px;
background: blue;
z-index: 6;
text-align: center;
}

#bottom
{
z-index: 6;
position: fixed;
bottom: 0px;
background: #666666;
height: 50px;
width: 100%;
text-align: center;
}

#right
{
position: fixed;
top: 50%;
right: 10px;
height: 300px;
width: 100px;
background: #666666;
z-index: 6;
text-align: center;
margin-top: -150px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
}

#center
{
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
background: #666666;
z-index: 6;
text-align: center;
margin-top: -100px; /*因为不是50%不是真正的居中，所以要上移高度的一半*/
margin-left: -200px; /*因为不是50%不是真正的居中，所以要左移宽度的一半*/
}
</style>
</head>
<body>
<div id="top">
TOP
</div>
<div id="left">
LEFT
</div>
<div id="bottom">
BOTTOM
</div>
<div id="right">
RIGHT
</div>
<div id="center">
CENTER
</div>
<div id="smallleft">
</div>
<div id="smallright">
</div>
<div id="smallbottom">
</div>
<div id="smalltop">
</div>
<div id="floatdiv">
</div>
<div style="height: 1024px; background-color: Silver">
<pre>

绝对定位使元素的位置与文档流无关，因此不占据空间。
这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

</pre>
<table>
<tr>
<td>
absolute
</td>
<td>
<p>
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p>
<p>
元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。</p>
</td>
</tr>
<tr>
<td>
fixed
</td>
<td>
<p>
生成绝对定位的元素，相对于浏览器窗口进行定位。</p>
<p>
元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。</p>
</td>
</tr>
<tr>
<td>
relative
</td>
<td>
<p>
生成相对定位的元素，相对于其正常位置进行定位。</p>
<p>
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p>
</td>
</tr>
<tr>
<td>
static
</td>
<td>
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
</td>
</tr>
<tr>
<td>
inherit
</td>
<td>
规定应该从父元素继承 position 属性的值。
</td>
</tr>
</table>
</div>
</body>
</html>
本文出自 “一只博客” 博客，请务必保留此出处http://cnn237111.blog.51cto.com/2359144/940308
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航