前端画图之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:;padding:;}
.mask{width:640px;height:1136px;position:absolute;top:;}
.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:%;width:%;}
.left{float:left;width:%;text-align:left;}
.right{float:right;width:%;text-align:right;}
.center,.text{font-weight:bold;}
.row{width:%;height:%;padding: auto;}
.row-col{display:inline-block;height:%;width:%;border-radius:%;margin:%;}
.text-row{width:%;}
.text{display:inline-block;width:%;text-align:center;font-size:24px;color:white;}
.footerbox{margin-top:%;}
.footer{width:%;height:%;margin-top:%;}
.thefour{font-size:100px;margin-top:%;}
.sev{font-size:20px;margin-top:%;}
.footerfour,.inner{text-align:center;}
.footermusic{margin-left:-%;}
.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:%;margin:%;float:left;}
.wrap{height:%;width:%;margin:%;}
.jsaw{background-color:#6699ff;color:white;}
.address-book,.commenting{background-color:#62b900;color:white;}
.compass{background:white;color:#3399ff;}
.bg{background-color:#EAEAEA;opacity:.;}
.popup{height:1136px;width:640px;position:absolute;top:;z-index:;display:none;}
.theone{height:53.5%;width:%;background-color:#EAEAEA;opacity:;border-radius:%;margin-top:%;margin-left:2.5%;}
.theonecontent{height:53.5%;width:%;border-radius:%;margin-top:%;margin-left:2.5%;opacity:;}
.theonecontent{position:absolute;top:;z-index:;}
.popup .theonecontent .wrap .inner span{font-size:90px;margin-top:%;}
</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"></span> 中国移动 <span class="fa fa-wifi "></span></p>
<p class="right"><span class="fa fa-bluetooth"></span> <span class="fa fa-clock-o"></span> % <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<)myhours=""+myhours;
if(myminutes<)myminutes=""+myminutes;
$(".center").text(myhours+":"+myminutes);
}
var ck=setInterval(clock, ); <!--信号显示，采用80-120的随机数-->
function signal(){
var rdm=parseInt(Math.random()*+);
$(".signal").text(rdm);
}
var sl=setInterval(signal,); <!--单击小方块弹出应用框-->
var wraps=$(".wrap");
for(var i=;i<;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=;
var c=;
function theoneon(){
b=b+0.2;
$(".theone").css('opacity',b);
if(b>0.6){clearInterval(bb);
b=;};}
function theonecontenton(){
c=c+0.2;
$(".theonecontent").css('opacity',c);
if(c>){clearInterval(cc);
c=;};}
var bb=setInterval(theoneon,);
var cc=setInterval(theonecontenton,);
});}; <!--应用框淡出效果-->
$(".popup").on("click",function(){ var b=0.6;
var c=;var d=;
function theoneoff(){
b=b-0.2;
$(".theone").css('opacity',b);
if(b<=)clearInterval(bb);}
function theonecontentoff(){
c=c-0.2;
$(".theonecontent").css('opacity',c);
if(c<=){clearInterval(cc);
$(".popup").css('display','none');
$(".father").css('-webkit-filter','none');
$(".theonecontent").css('opacity',);
$(".theone").css('opacity',);};}
var bb=setInterval(theoneoff,);
var cc=setInterval(theonecontentoff,);
});
</script>
</body>
</html>
前端画图之iphoneSE主屏的更多相关文章
- 在CentOS 7 / Gnome 3 双屏时设置主屏
在Windows中设置扩展显示器为主屏的方式非常清楚,但在Linux中就不是那么明显了,下面介绍如何完成这个设置 ------------------------------------------- ...
- jmgraph前端画图组件(html5版)
原文:jmgraph前端画图组件(html5版) jmgraph是一个基于html5的WEB前端画图组件. 前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支 ...
- ubuntu 设置主屏和副屏
作为一个程序员,从开始使用双屏之后,一个显示屏开发,那种感觉,就是不好... 好吧,刚换到ubuntu,笔记本一个显示屏,外接了一个HDMI的显示器,由于书桌的位置,只有把HDMI的显示屏放在笔记本的 ...
- MacOS & dock 工具栏 & 外接显示器 & 主屏
MacOS & dock 工具栏 & 外接显示器 & 主屏 macos 如何将 dock工具栏从外接显示器拖回主屏 https://support.apple.com/zh-c ...
- 微前端（qiankun）主应用共享React组件
前言 最近需要重构一个老项目,定的方案用微前端去改造.主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件.过程中遇到一些问题,记录一下. 方案 我们知道qian ...
- [刘阳Java]_Web前端入门级练习_迅雷首页第一屏设计
今天接着上一篇文章<Web前端入门级练习_迅雷官宣网设计>正式开始迅雷首页第一版的设计.如果完成,则最终的效果图如下 第一步:先完成logo部分的设计 logo设计,我们会使用CSS的定位 ...
- 移动web页面前端开发总结
移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...
- 移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
- 【转】移动前端不得不了解的html5 head 头标签
来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...
随机推荐
- Jupyter Notebook修改目标文件
默认的路径 如果没有修改配置文件,那么一般就在用户目录下面: 下面各处默认起始目标地址,以防有一天想改回来 I:\shujufenxi\python.exe I:\shujufenxi\cwp.py ...
- LeetCode：下一个更大元素I【31】
LeetCode:下一个更大元素I[31] 题目描述 给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的 ...
- Kattis - honey【DP】
Kattis - honey[DP] 题意 有一只蜜蜂,在它的蜂房当中,蜂房是正六边形的,然后它要出去,但是它只能走N步,第N步的时候要回到起点,给出N, 求方案总数 思路 用DP 因为N == 14 ...
- Wannafly交流赛1_B_硬币【数学】
Wannafly交流赛1_B_硬币[数学] 链接:https://www.nowcoder.com/acm/contest/69/B 来源:牛客网 题目描述 蜥蜴的生日快到了,就在这个月底! 今年,蜥 ...
- HandlerSocket ---MySQL与NoSQL ---SQL与NoSQL的融合（转）
项目地址:https://github.com/ahiguti/HandlerSocket-Plugin-for-MySQL 写这一篇内容的原因是MySQL5.6.2突然推出了memcached的功能 ...
- xx-net***简明使用教程
简介 继psiphon3.lantern.shadowsocks后,翻 土啬 界就来个新角色:xx-net 这张图是.2016.8.30日Google最新的搜索结果,还是可以看出这款工具的火爆程度的, ...
- [pixhawk笔记]1-编译过程
好久没有编译过PIXHAWK了,由于项目需要,又买了一个pixhawk2,由于每次编译都会出现新的问题,这次写帖子将过程记录下来. 环境:WIN10+Ubuntu16.04 64位(VMware Wo ...
- shell脚本小示例
求1-100自然数的和: 法一:for循环 #!/bin/bash # declare -i sum=0 for ((i=0;i<=100;i++));do let sum+=$i done e ...
- Hbase:简单介绍一下Hbase表的结构
HBase 是一个NoSQL数据库,用于处理海量数据,可以支持10亿行百万列的大表,下面我就和大家分享一下数据是如何存放在HBase表中的 为了更好的理解HBase表的思路,先回顾一下关系数据库中表的 ...
- 关于jquery的each遍历，return只终止当前循环，不好使的解决办法
很奇怪,一般来说return会终止js,但是今天万万没想到的是,jquery 的each循环中,return不好使,做一记录, var result = true; $('input[type=&qu ...