最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 20:58:23
文档

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧: 代码如下: 随滚动条移动的层 .div{ position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height:90px; font-size:12px; z-index:1000; } --> 正中... function sc
推荐度:
导读js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧: 代码如下: 随滚动条移动的层 .div{ position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height:90px; font-size:12px; z-index:1000; } --> 正中... function sc


代码如下:


随滚动条移动的层




正中...

function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}

左上...

function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}

左下...

function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}

右上...

function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}

右下...

function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}



function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->




文档

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合_javascript技巧: 代码如下: 随滚动条移动的层 .div{ position: absolute; border: 2px solid red; background-color: #EFEFEF; line-height:90px; font-size:12px; z-index:1000; } --> 正中... function sc
推荐度:
标签: 设置 代码 屏幕的
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top