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

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

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

<html >
<head>
<title>yanan7890的分享</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="./jquery-1.11.0.js" type="text/javascript"></script>
<style>
#yanandownload {
    background-color: #000000;
    opacity: 0.8;
    width: 100%;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 100px;
}

.down {
    float: left;
    width: 52%;
}

.close {
    width: 47%;
    float: right;
}

#yanandownload .down img {
    width: 100%;
    padding-left: 20px;
    max-height: 60px;
    max-width: 344px;
    vertical-align: middle;
    text-align: center;
}
#yanandownload .close input {
    display: table-cell;
    font-size:28px;
    float: right;
    border-radius: 4px;
    border-width: 0;
    background-color: #007aff;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    width: 155px;
    height: 60px;
    margin-top: 20px;
    position: relative;
    margin-right: 80px;
}
#yanandownload .close img {
    padding-right: 20px;
    float: right;
    padding-top: 35px;
    vertical-align: middle;
    text-align: center;
}

</style>
<script type="text/javascript">
    function closedownload() {
        var parent = document.getElementsByTagName('body')[0];
        parent.removeChild(document.getElementById('yanandownload'));
    };
    $(function(){
        //图片344:60=height,
        var sw=window.screen.width;//获取手机屏幕宽度?分辨率
        var img=$("#testimg");
    //    var img = document.createElement("img");
    //    img.src = url;
    
        var margintop;
        if(sw<=360){
            img.attr('height',sw/360*60);//根据屏幕宽度改变图片的高度
        }
        //alert(img.height());
        margintop=(100-img.height())/2;//图片高度变化后,改变margin-top,使之居中
        var fontsize=img.height*28/60+'px';//改变imput字体大小与宽高,高与前面图片保持一致,宽与字体大小根据原先的宽高比进行调整
        
        $("#inputbutton").css('height',img.height()).css('width',img.height()*155/60).css('margin-top',margintop).css('font-size',fontsize);
        $("#testimg").css('margin-top',margintop).css('height',img.height()).css('width',344/60*img.height());
    //    alert(margintop);
        if(img.height()<=30){
            var hh=img.height()+'px';
            $("#closeimg").css('height',hh).css('width',hh).css('padding-top',margintop);
        }
    })
</script>
</head>
<body style="margin: 0px;" >
    <div id='yanandownload'>
        <span class="down">
            <img id="testimg" src="./yanandownload.png" />
            </span>
        <span class="close">
            <img id="closeimg" src="./yananheadclose.png" onclick="closedownload();"/>
            <input id="inputbutton" type="button" value="Download" onclick="javascript:window.location.href='https://play.google.com/store/apps/details?id=com.yanannews.headline'" />
        </span>
    </div>
     <img src="./down.png" onclick="test();"/> 
</body>
</html>

View Code

注意:

1.我用的两张图片大小分别为yanandownload.png:344*60, yananclose.png:30*30,读者们实践的时候应根据图片实际大小修改代码中的预设的值.down.png的高度一定要大于屏幕高度,否则看不到置顶效果

2.本文中的#yanandownload的高是容器的高度.此文是根据项目实际需要设置的.容器的高度一定要大于缩放后(原始)的图片大小.

3.最后,别忘了引入jquery

其它:

实际项目部署后发现达不到理想的结果.经检查属于JQuery版本问题.后为了避免JQuery重复,改成了js

window.onload=function(){
            //图片344:60=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的语法比较严格吧