前端画图之iphoneSE主屏
Posted eco-just
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端画图之iphoneSE主屏相关的知识，希望对你有一定的参考价值。
今天逛园子，无意间看到一个用div+css画的Macbook Air的博客，瞬间想到很久之前我也做过类似的事，
而且，当时写完之后，真的是成就感爆棚啊！我去开源中国上翻到了我当时贴的源码，当时是在手机上
用JSAnywhere这款软件一字一字敲出来的，你可以想象一下用SE敲代码的那个画面。
现在回过头来看自己当初的代码，发现我的手机壁纸居然一直都没换过，233333~~
这里贴上全部的代码，有兴趣的同学可以复制一下，拿到本地跑跑看，上两张效果图先：
<!DOCTYPE html > <html> <head> <title>iPhone主界面</title> <!--引入jQuery库--> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--Bootstrap插件库--> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--引入Bootstrap <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">--> <!--引入字体图标库--> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" > <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> <style> *{margin:0;padding:0;} .mask{width:640px;height:1136px;position:absolute;top:0;} .iphone-home{width:640px;height:1136px;position:relative;background:url(https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b2de9c82d158ccbf46b1f8891ed8bc3eb1354177.jpg) repeat;background-size:110% 100%;} .iphone-header{text-align:center;padding-top:3px;font-size:24px;color:white;height:4%;width:100%;} .left{float:left;width:35%;text-align:left;} .right{float:right;width:35%;text-align:right;} .center,.text{font-weight:bold;} .row{width:100%;height:14%;padding:0 auto;} .row-col{display:inline-block;height:84%;width:21%;border-radius:18%;margin:2%;} .text-row{width:100%;} .text{display:inline-block;width:25%;text-align:center;font-size:24px;color:white;} .footerbox{margin-top:48%;} .footer{width:100%;height:19%;margin-top:48%;} .thefour{font-size:100px;margin-top:12%;} .sev{font-size:20px;margin-top:12%;} .footerfour,.inner{text-align:center;} .footermusic{margin-left:-17%;} .thephone{background-color:#00cc66;color:white;} .thewechat{background-color:#62b900;color:white;} .thehtml5{background-color:#cc0033;color:white;} .themusic{background-color:#FFFFF0;color:#33ccff;} .inner{height:23.3%;width:23.3%;border-radius:18%;margin:5%;float:left;} .wrap{height:90%;width:90%;margin:5%;} .jsaw{background-color:#6699ff;color:white;} .address-book,.commenting{background-color:#62b900;color:white;} .compass{background:white;color:#3399ff;} .bg{background-color:#EAEAEA;opacity:.6;} .popup{height:1136px;width:640px;position:absolute;top:0;z-index:2;display:none;} .theone{height:53.5%;width:95%;background-color:#EAEAEA;opacity:0;border-radius:18%;margin-top:40%;margin-left:2.5%;} .theonecontent{height:53.5%;width:95%;border-radius:18%;margin-top:40%;margin-left:2.5%;opacity:0;} .theonecontent{position:absolute;top:0;z-index:3;} .popup .theonecontent .wrap .inner span{font-size:90px;margin-top:9%;} </style> <meta charset="UTF-8"> </head> <body> <div class="father"> <div class="iphone-home"> <div class="iphone-header"> <p class="left"> </p> <p class="right"> </p> <p> </p> </div> <div class="row"> <div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div> </div> <div class="text-row"> <span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span> </div> <div class="row"> <div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div> </div> <div class="text-row"> <span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span> </div> <div class="row"> <div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div><!-- --><div class="row-col bg"></div> </div> <div class="text-row"> <span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span><!-- --><span class="text"> </span> </div> <div class="footer bg"> </div> </div><!--iphonehome--> <!--遮罩层--> <div class="mask"> <div class="iphone-header"> <p class="left"> -<span class="signal">78</span> 中国移动 <span class="fa fa-wifi "></span></p> <p class="right"><span class="fa fa-bluetooth"></span> <span class="fa fa-clock-o"></span> 100% <span class="fa fa-battery-full"></span> </p> <p class="center">time</p> </div> <div class="row"> <div class="row-col"><div class="wrap"> <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!-- --><div class="inner jsaw"><span class="sev">.js</span></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner address-book"><span class="sev fa fa-address-book-o"></span></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner commenting"><span class="sev fa fa-commenting"></span></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner compass"><span class="sev fa fa-compass"></span></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div> </div> <div class="text-row"> <span class="text">找</span><!-- --><span class="text">不</span><!-- --><span class="text">到</span><!-- --><span class="text">那</span> </div> <div class="row"> <div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div> </div> <div class="text-row"> <span class="text">么</span><!-- --><span class="text">多</span><!-- --><span class="text">好</span><!-- --><span class="text">看</span> </div> <div class="row"> <div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div><!-- --><div class="row-col"><div class="wrap"> <div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div> </div> </div> <div class="text-row"> <span class="text">的</span><!-- --><span class="text">图</span><!-- --><span class="text">标</span><!-- --><span class="text">啊</span> </div> <div class="row footerbox"> <div class="row-col footerfour thephone"><span class="fa fa-phone thefour"></span> </div><!-- --><div class="row-col footerfour themusic"><span class="fa fa-music thefour footermusic"></span> </div><!-- --><div class="row-col footerfour thehtml5"><span class="fa fa-html5 thefour"></span> </div><!-- --><div class="row-col footerfour thewechat"><span class="fa fa-wechat thefour "></span> </div> </div> <div class="text-row footertext"> <span class="text">电话</span><!-- --><span class="text">音乐</span><!-- --><span class="text">html5</span><!-- --><span class="text">微信</span> </div> </div><!--mask--> </div> <div class="popup"> <div class="theone"> </div> <div class="theonecontent"> <!--动态添加--> <div class="wrap popup-wrap"> <div class="inner thewechat"><span class="fa fa-wechat sev"></span></div><!-- --><div class="inner jsaw"><span class="sev">.js</span></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div><!-- --><div class="inner"></div> </div><!--wrap--> </div><!--theonecontent--> </div><!--popup--> <script type="text/javascript"> <!--中间的时间显示--> function clock(){ var mydate =new Date(); var myhours=mydate.getHours(); var myminutes=mydate.getMinutes(); if(myhours<10)myhours="0"+myhours; if(myminutes<10)myminutes="0"+myminutes; $(".center").text(myhours+":"+myminutes); } var ck=setInterval(clock, 100); <!--信号显示，采用80-120的随机数--> function signal(){ var rdm=parseInt(Math.random()*40+80); $(".signal").text(rdm); } var sl=setInterval(signal,5000); <!--单击小方块弹出应用框--> var wraps=$(".wrap"); for(var i=0;i<12;i++){ $(wraps[i]).on("click",function(){ <!--动态获取应用框内容--> var a=$(this).html(); $(".popup-wrap").html(a); $(".father").css(‘-webkit-filter‘,‘blur(15px)‘); $(".popup").css(‘display‘,‘block‘); <!--应用框的淡入效果--> var b=0; var c=0; function theoneon(){ b=b+0.2; $(".theone").css(‘opacity‘,b); if(b>0.6){clearInterval(bb); b=0;};} function theonecontenton(){ c=c+0.2; $(".theonecontent").css(‘opacity‘,c); if(c>1){clearInterval(cc); c=0;};} var bb=setInterval(theoneon,50); var cc=setInterval(theonecontenton,50); });}; <!--应用框淡出效果--> $(".popup").on("click",function(){ var b=0.6; var c=1;var d=15; function theoneoff(){ b=b-0.2; $(".theone").css(‘opacity‘,b); if(b<=0)clearInterval(bb);} function theonecontentoff(){ c=c-0.2; $(".theonecontent").css(‘opacity‘,c); if(c<=0){clearInterval(cc); $(".popup").css(‘display‘,‘none‘); $(".father").css(‘-webkit-filter‘,‘none‘); $(".theonecontent").css(‘opacity‘,0); $(".theone").css(‘opacity‘,0);};} var bb=setInterval(theoneoff,50); var cc=setInterval(theonecontentoff,50); }); </script> </body> </html>
以上是关于前端画图之iphoneSE主屏的主要内容，如果未能解决你的问题，请参考以下文章