pc随着宽度的变化而变化

原创 小棋子 随笔 js 145阅读 2019-05-06 16:28:42 举报

window.onload = function(){watchChangeSize();}
window.onresize=function(){ watchChangeSize();console.log('监听变化')}
function watchChangeSize (){
//可视区的宽/高(DOM);offsetHeight(带边框)和clientHeight(不带边框)
var offsetWid = document.documentElement.clientWidth;
var offsetHei = document.documentElement.clientHeight;
console.log(offsetWid);
if(offsetWid<1500){
document.getElementById("erweima").style.cssText="width:177px;height:328px;position: fixed;top:230px;right:0px;";
// analyMap.style.cssText = "position: fixed; top:" + top + "px; right: " + ((winWidth - 950) / 2 - 50) + "px;";
}else{
document.getElementById("erweima").style.cssText="width:177px;height:328px;position: fixed;top:230px;right:250px;";
}
}

二。 第二种是跟着跑
var objPostion = function (width, height) {
this.w = width;
this.h = height;
}
function getWidth() {
var winWidth = 0;
var winHeight = 0;
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// if (document.documentElement && document.documentElement.clientWidth) {
// winWidth = document.documentElement.clientWidth;
// winHeight = document.documentElement.clientHeight;
// }
var obj = new objPostion(winWidth, winHeight);
return obj;
}
function changePostion() {
var top = 200;
var obj = getWidth();
var winWidth = obj.w;
var winHeight = obj.h;
var doc_scrollTop = document.body.scrollTop;
if (doc_scrollTop == 0) doc_scrollTop = document.documentElement.scrollTop;
var obj = document.getElementById("analyMap");
if (navigator.userAgent.indexOf("MSIE") > 0 && navigator.userAgent.indexOf("MSIE 6.0") > 0) {
obj.style.cssText = "position: absolute;top:" + (doc_scrollTop + top) + "px;right: " + ((winWidth - 950) / 2 - 50) + "px;";
}
else {
obj.style.cssText = "position: fixed; top:" + top + "px; right: " + ((winWidth - 950) / 2 - 50) + "px;";
}
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复