html怎么浮动到右下角,javascript-浮动在右下角的一个div

var Initialization

=true //判断div是否滚动下去了 true没下去 false下去了var Opacity

=100 //设置透明度

var

i=0 //移动的次数 根据长度算和移动速度算出来的window.onresize = resizeDiv;

window.onscroll = resizeDiv;

function resizeDiv()

{

divHeight =

parseInt(document.getElementByIdx("xx").offsetHeight,10);

divWidth =

parseInt(document.getElementByIdx("xx").offsetWidth,10);

docWidth = document.body.clientWidth;

docHeight = document.body.clientHeight;

if(Initialization)

{document.getElementByIdx("xx").style.top = docHeight +

parseInt(document.body.scrollTop,10) - divHeight ;

document.getElementByIdx("xx").style.left = docWidth +

parseInt(document.body.scrollLeft,10) - divWidth;}

else

{

document.getElementByIdx("xx").style.top = docHeight +

parseInt(document.body.scrollTop,10) - divHeight;

}

}

function move(){

if(Initialization)

{

if(i!=34)

{

i++;

document.getElementByIdx("xx").style.top=parseInt(document.getElementByIdx("xx").style.top)+5

tt=setTimeout("move()",10)

}

else

{window.clearTimeout(tt);

Initialization=false;document.getElementByIdx("content").style.display

= "none";}

}

else

{

if(i!=0)

{

document.getElementByIdx("content").style.display = "";

i--

document.getElementByIdx("xx").style.top=parseInt(document.getElementByIdx("xx").style.top)-5

tt=setTimeout("move()",10)

}

else

{Initialization=true;window.clearTimeout(tt)}

}

}

function disappear(){

if(Opacity==0)

{window.clearTimeout(time);

document.getElementByIdx('xx').style.display="none";}

else

{

Opacity=Opacity-10;

document.getElementByIdx('xx').style.filter =

"Alpha(opacity="+Opacity+")";

time=setTimeout("disappear()",50)

}

}

hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe
hehe

新闻列表

onClick="move()">--

onClick="disappear()">X

id="content">

document.getElementByIdx("content").style.display =

"none";

在象下滑动结束后一定要加上这句，浏览器会包含所有元素的，不隐藏就会浏览器就会无限延伸下去。

顺便总结一下几个 x,y,height,width的意思

clientHeight

(clientWidth)内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight

offsetHeight = clientHeight + 滚动条 + 边框(我只考虑ie下的)

#a{

border:1px solid #999999;

height:300px;

width:300px;

}

function window.onload(){

document.body.childNodes[0].innerHTML="offsetHeight:"+document.body.offsetHeight document.body.childNodes[2].innerHTML="offsetWidth:"+document.body.offsetWidth

document.body.childNodes[4].innerHTML="clientHeight:"+document.body.clientHeight

document.body.childNodes[6].innerHTML="clientWidth:"+document.body.clientWidth

document.body.childNodes[11].innerHTML="offsetHeight:"+document.getElementByIdx("a").offsetHeight document.body.childNodes[13].innerHTML="offsetWidth:"+document.getElementByIdx("a").offsetWidth

document.body.childNodes[15].innerHTML="clientHeight:"+document.getElementByIdx("a").clientHeight

document.body.childNodes[17].innerHTML="clientWidth:"+document.getElementByIdx("a").clientWidth

}

id="a">

可以看出来offsetHeight要大一些，正是加了边框的原因

clientX

事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。(event.clientX)

也就是说clientX是必须有事件触发的

offsetX

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标

#a{

position:absolute;

border:1px solid #999999;

height:300px;

width:300px;

}

//document.onmousemove =move

function move(){

document.body.childNodes[0].innerHTML

="clientX:"+event.clientX

document.body.childNodes[2].innerHTML

="clientY:"+event.clientY

document.body.childNodes[4].innerHTML

="offsetX:"+event.offsetX

document.body.childNodes[6].innerHTML

="offsetY:"+event.offsetY

}

onMouseMove="move()">

scrollHeight

这个就有点难的理解了