用js实现居中浮动
用js实现居中浮动像对联广告一样.是弹性浮动的那种你好。谢谢你给我的答题。但是我要的是居中不是居左。并且要兼容各种分辨率。：）...
用js实现居中浮动像对联广告一样.
是弹性浮动的那种
你好。谢谢你给我的答题。但是我要的是居中不是居左。并且要兼容各种分辨率。：） 展开
是弹性浮动的那种
你好。谢谢你给我的答题。但是我要的是居中不是居左。并且要兼容各种分辨率。：） 展开
1个回答
展开全部
<body onscroll="moveDiv()">
<div id="divs" style="background-image:url(screenshot1.jpg);background-color:#99ffff;height:140;width:100;left:0;visibility:visible;position:absolute;FILTER: alpha(opacity=0);top:5;z-index:1">
<center>
welcome
welcome
welcome
<br />
<a href=javascript:hiddenDiv()>关闭</a>
</center>
</div>
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
</body>
<script language="javascript">
function showDiv(){
document.getElementById("divs").style.visibility="visible";
openOpacity(0);
}
function openOpacity(opaci){
var opacity = opaci;
if(opacity<100){
opacity = opacity + 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("openOpacity("+opacity+")",10);
}else{
setTimeout("closeDiv(100)",3000);
}
}
function closeDiv(opaci){
var opacity = opaci;
if(opacity>0){
opacity = opacity - 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("closeDiv("+opacity+")",10);
}else{
hiddenDiv();
}
}
function moveDiv(){
document.getElementById("divs").style.top = document.body.scrollTop + 5;
}
function hiddenDiv(){
document.getElementById("divs").style.visibility="hidden";
}
showDiv();
</script>
我自己写的一个，你改一下DIV的位置和
document.getElementById("divs").style.top = document.body.scrollTop + 5;
这句就可以了
真服了你了，剩下的已经不是难点了。简单改一下图层的位置就行了。我居左是为了和下面的字对照，看出来图层是在移动。
注意看我两部分代码的区别。
<body onscroll="moveDiv()" onresize="middleDiv()" onload="middleDiv()">
<div id="divs" style="background-image:url(screenshot1.jpg);background-color:#99ffff;height:140;width:100;visibility:visible;position:absolute;FILTER: alpha(opacity=0);top:5;z-index:1">
<center>
welcome
welcome
welcome
<br />
<a href=javascript:hiddenDiv()>关闭</a>
</center>
</div>
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
</body>
<script language="javascript">
var divTop = 0;
var divRight = 0;
function middleDiv(){
divTop = (document.body.clientHeight-parseInt(divs.style.height))/2;
divRight = (document.body.clientWidth-parseInt(divs.style.width))/2;
divs.style.top = divTop;
divs.style.right = divRight;
}
function showDiv(){
document.getElementById("divs").style.visibility="visible";
openOpacity(0);
}
function openOpacity(opaci){
var opacity = opaci;
if(opacity<100){
opacity = opacity + 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("openOpacity("+opacity+")",10);
}else{
setTimeout("closeDiv(100)",3000);
}
}
function closeDiv(opaci){
var opacity = opaci;
if(opacity>0){
opacity = opacity - 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("closeDiv("+opacity+")",10);
}else{
hiddenDiv();
}
}
function moveDiv(){
document.getElementById("divs").style.top = document.body.scrollTop + divTop;
}
function hiddenDiv(){
document.getElementById("divs").style.visibility="hidden";
}
showDiv();
</script>
<div id="divs" style="background-image:url(screenshot1.jpg);background-color:#99ffff;height:140;width:100;left:0;visibility:visible;position:absolute;FILTER: alpha(opacity=0);top:5;z-index:1">
<center>
welcome
welcome
welcome
<br />
<a href=javascript:hiddenDiv()>关闭</a>
</center>
</div>
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
</body>
<script language="javascript">
function showDiv(){
document.getElementById("divs").style.visibility="visible";
openOpacity(0);
}
function openOpacity(opaci){
var opacity = opaci;
if(opacity<100){
opacity = opacity + 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("openOpacity("+opacity+")",10);
}else{
setTimeout("closeDiv(100)",3000);
}
}
function closeDiv(opaci){
var opacity = opaci;
if(opacity>0){
opacity = opacity - 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("closeDiv("+opacity+")",10);
}else{
hiddenDiv();
}
}
function moveDiv(){
document.getElementById("divs").style.top = document.body.scrollTop + 5;
}
function hiddenDiv(){
document.getElementById("divs").style.visibility="hidden";
}
showDiv();
</script>
我自己写的一个，你改一下DIV的位置和
document.getElementById("divs").style.top = document.body.scrollTop + 5;
这句就可以了
真服了你了，剩下的已经不是难点了。简单改一下图层的位置就行了。我居左是为了和下面的字对照，看出来图层是在移动。
注意看我两部分代码的区别。
<body onscroll="moveDiv()" onresize="middleDiv()" onload="middleDiv()">
<div id="divs" style="background-image:url(screenshot1.jpg);background-color:#99ffff;height:140;width:100;visibility:visible;position:absolute;FILTER: alpha(opacity=0);top:5;z-index:1">
<center>
welcome
welcome
welcome
<br />
<a href=javascript:hiddenDiv()>关闭</a>
</center>
</div>
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
hello<br />
</body>
<script language="javascript">
var divTop = 0;
var divRight = 0;
function middleDiv(){
divTop = (document.body.clientHeight-parseInt(divs.style.height))/2;
divRight = (document.body.clientWidth-parseInt(divs.style.width))/2;
divs.style.top = divTop;
divs.style.right = divRight;
}
function showDiv(){
document.getElementById("divs").style.visibility="visible";
openOpacity(0);
}
function openOpacity(opaci){
var opacity = opaci;
if(opacity<100){
opacity = opacity + 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("openOpacity("+opacity+")",10);
}else{
setTimeout("closeDiv(100)",3000);
}
}
function closeDiv(opaci){
var opacity = opaci;
if(opacity>0){
opacity = opacity - 1;
document.getElementById("divs").filters.alpha.opacity = opacity;
setTimeout("closeDiv("+opacity+")",10);
}else{
hiddenDiv();
}
}
function moveDiv(){
document.getElementById("divs").style.top = document.body.scrollTop + divTop;
}
function hiddenDiv(){
document.getElementById("divs").style.visibility="hidden";
}
showDiv();
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
