您的位置：首页 > 其它

图片置顶\居中\不同手机屏幕自动缩放的实现

2017-03-17 18:52 323 查看

这几天在网上看了很多代码,实现效果都不理想.一番折腾多次改良后终于完美了!现将实现效果分享给大家

思路:手机型号众多屏幕宽高不一,纯css难以实现自适应与居中的"合体",需要借助js(JQuery).先得到手机屏幕宽度,谷歌下调试一下查看原始大小在谷歌浏览器全屏下的显示效果,逐渐缩小浏览器显示的宽度,知道图片开始变化停止,此时的值作为一个参考值(缩放的临界点A),然后当屏幕宽度<A时,为了使图片自适应屏幕宽度,需要乘以缩放比例.缩放比例B=当前屏幕宽度/A;得到B后,为了使之居中,margin-top=(容器高度C-图片原始高度D*B)/2;当然padding-top也是可以的.

window.onload=function(){
//图片344:60=width:height,
var sw=window.screen.width;//获取手机屏幕宽度?分辨率
var img=document.getElementById("downloadimg");
if(img.height==0){
img.style.height=60;
}
//    var img = document.createElement("img");
//    img.src = url;
if(sw<=360){
img.style.height=sw/360*60;//根据屏幕宽度改变图片的高度
}
var margintop=(100-img.height)/2;//图片高度变化后,改变margin-top,使之居中
var fontsize=img.height*28/60+'px';//改变imput字体大小与宽高,高与前面图片保持一致,宽与字体大小根据原先的宽高比进行调整
var inbutton=document.getElementById("inputbutton");
inbutton.style.height=img.height;
inbutton.style.width=img.height*155/60;
inbutton.style.marginTop=margintop;
inbutton.style.fontSize=fontsize;
img.style.marginTop=margintop;
img.style.height=img.height;
img.style.width=344/60*img.height;
if(img.height<=30){
var hh=img.height+'px';
var closeimg=document.getElementById("closeimg");
closeimg.style.height=hh;
closeimg.style.width=hh
closeimg.style.paddingTop=margintop;
}
}

View Code
部署后还是不行,再检查有个<!DOCTYPE html>(h5声明)在搞怪,把他去了就正常了.后经确认,img.style.marginTop=margintop+'px';及相应各处必须要有px,估计是h5的语法比较严格吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航