iphone主界面

最新推荐文章于 2024-09-07 13:38:28 发布
chuangyuchu9216
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量172
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3551078/blog/979083
版权
<!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">&nbsp;</p>
        <p class="right">&nbsp;</p>
        <p>&nbsp;</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">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</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">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</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">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span><!--
          --><span class="text">&nbsp;</span>
     </div>

      <div class="footer bg">
</div>
</div><!--iphonehome-->



<!--遮罩层-->
<div class="mask">
     <div class="iphone-header">
        <p class="left">&nbsp;-<span class="signal">78</span> 中国移动 &nbsp;<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>&nbsp;&nbsp;</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>
转载于:https://my.oschina.net/u/3551078/blog/979083