这几天在网上看了很多代码,实现效果都不理想.一番折腾多次改良后终于完美了!现将实现效果分享给大家
思路:手机型号众多屏幕宽高不一,纯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>
注意:
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; } }
部署后还是不行,再检查有个<!DOCTYPE html>(h5声明)在搞怪,把他去了就正常了.后经确认,img.style.marginTop=margintop+'px';及相应各处必须要有px,估计是h5的语法比较严格吧