码迷，mamicode.com
首页 > 移动开发 > 详细

一个简单移动页面ionic打包成app

时间：2017-01-03 22:13:15      阅读：626      评论：0      收藏：0      [点我收藏+]

标签：新一代   html   poi   document   url   port   ora   min   ati   

先贴JS代码好了，缓动和调整透明度的功能,最后用ionic打包成应用就可以

window.onload=function(){
search();
move();
calc();
}
function search(){

var search = document.querySelector(".hw_header_box");
var banner = document.querySelector(".img_content");
var height = banner.offsetHeight;
var height1=2*height;
var opacity = 1;
// console.log(height1);
window.onscroll=function(){
search.style.display="block";
if(document.body.scrollTop<3*height1){
opacity = 1-document.body.scrollTop/(height1*3);
}else if(document.body.srcollTop<3*height1){
opacity = 0;
}else{
search.style.display="none";
}
search.style.background="rgba(240,240,240,"+opacity+")";

}
}

 

function animation(obj,target){
var speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed = (target - obj.offsetLeft)/10;
speed = (speed>0?Math.ceil(speed):Math.floor(speed));
obj.style.left = obj.offsetLeft+speed+"px";
if(obj.offsetLeft==target){
clearInterval(obj.timer);
}
}, 20)
}
function move(id){



var rotateScreen=document.getElementById("screen");
var page=document.getElementById("page1_container")
var width=rotateScreen.offsetWidth;
console.log(width);
var width1=400;
var trigger=document.getElementById("trigger");
var triggerBack=document.getElementById("triggerBack");

trigger.onclick=function(){
animation(page,-width);
}
triggerBack.onclick=function(){
animation(page,0);
}

}

 

function calc(){
var results="";

var calresults="";
var lastkey="";
var results2="";
var flg=1;
var re1=/^[\*|\/].+/;
var re2=/.+[\*|\/]$/;
var re3=/(\+|-|\*|\/)/;

var calculator=document.getElementById("calculater");
var equality=document.getElementById("equality");
// calculator.onclick=calculator;
// equality.onclick=resultscalculate;


calculator.onclick=function() {

// 点击=触发的calculater()函数得不到结果

if(event.srcElement.innerText=="="){
return;
}

// .c键的清除功能
if(event.srcElement.innerText=="c"){
results="";
display.innerText="0";
return;
}

//点击显示框时使触发的calculator函数得不到结果
if(event.srcElement.id=="display"){
return;
}

//显示框第一个元素为运算符显示输入错误，result清空

if(results.match(re1)){
results="";
display.innerText="wrong !";
return;
}

//显示框末位不能出现两个运算符
if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
return;
}


//若结果后输入运算符继续运算
if(lastkey=="="&&event.srcElement.innerText.match(re3)){
results=calresults;
}

//取反功能
if (event.srcElement.innerText=="+/-"&&results!="") {
if (flg==-1) {
results=String(results2);
display.innerText=results;
flg=-flg;
return;
}
results2=results;
results = "-"+"("+results+")";
flg=-flg;
display.innerText=results;
return;
}
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
display.innerText=results;

}


equality.onclick=function(){
if (results.match(re1)||results.match(re2)) {
display.innerText="输入错误";
results="";
return;
}

calresults=eval(results);
display.innerText=calresults;
lastkey="=";
results="";
}

}

 html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
-webkit-box-sizing:border-box;
}

</style>
</head>
<body id="hw">
<div id="screen">
<div id="page1_container">
<!--VISIABLE PART BEGINS-->
<div class="hw_layout">
<!-- SEARCH BAR BEGINS -->
<header class="hw_header clearfix">
<div class="hw_header_box">
<a href="#" class="icon_logo">
<img src="img/firstPage/logo.png" />
</a>
<ul>
<li id="trigger"></li>
<li id="triggerBack"></li>
</ul>
</div>
</header>
<!-- SEARCH BAR ENDS -->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img1">
<a href="#">
<img src="img/firstPage/mate9_bg_cn.jpg" />
</a>
</div>
<div class="img_content_des" id="page1_des1">
<h2>HUAWEI Mate9</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img2">
<a href="#">
<img src="img/firstPage/048A49506781.jpg" />
</a>
</div>
<div class="img_content_des" id="page1_des1">
<h2>PANIC DOESN‘T HELP</h2>
<p>Do not go gentle into that good night.
Rage, rage against the dying of the light</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img3">
<a href="#">
<img src="img/firstPage/intersteller.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>PANIC DOESN‘T HELP</h2>
<p>Do not go gentle into that good night.
Rage, rage against the dying of the light</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img4">
<a href="#">
<img src="img/firstPage/mbb2020.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>PANIC DOESN‘T HELP</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img5">
<a href="#">
<img src="img/firstPage/winwin26.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>
<!--PIC ENDS-->
<div class="img_content">
<div class="img_content_img img6">
<a href="#">
<img src="img/firstPage/power-ict-in-a-smart-way.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img7">
<a href="#">
<img src="img/firstPage/hw1_index_video2.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>华为|莱卡联合设计，新一代麒麟960芯片，智能学习的EMUI5.0,突破性解决安卓卡顿</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC ENDS-->
<div class="img_content">
<div id="page1_news">
<a href="#">
<p>新闻</p>
</a>
<a href="#">
<p>HUAWEI Mate9 一不小心就被卖了</p>
</a>
<a href="#">
<p>见到风就是雨</p>
</a>
<a href="#">
<p>总想搞个大新闻</p>
</a>

</div>

</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">

<div class="img_content_img img8">
<h2>NAIVE展会活动</h2>
<a href="#">
<img src="img/firstPage/mbbf.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>展会活动</h2>
<p>苟利国家生死以，岂因祸福避趋之</p>
</div>
</div>
<!--PIC ENDS-->
<!--PIC BEGINS-->
<div class="img_content">
<div class="img_content_img img7">
<a href="#">
<img src="img/firstPage/hid16cn.jpg" />
</a>
</div>
<div class="img_content_des">
<h2>数字化转型，知行均不易</h2>
<p>In persuit of knowledge,something is aquired.In persuit of wisdom,something is dropped</p>
</div>
</div>
<!--PIC ENDS-->
<!--BOTTOM BEGINS-->
<div class="img_content">
<div class="bottom_ul_container">
<ul>
<li>
<p>按访问者</p>
<span>></span>
</li>
<li>
<p>关于我们</p>
<span>></span>
</li>
<li>
<p>新闻展会</p>
<span>></span>
</li>
<li>
<p>快速链接</p>
<span>></span>
</li>
<li>
<p>行业洞察</p>
<span>></span>
</li>

</ul>
</div>
<div class="img_content_des" id="page1_desBottom">
<h2>关注我们</h2>
<div>
<ul>
<li> <a href="#"></a> </li>
<li> <a href="#"></a> </li>
</ul>
</div>
</div>
<div class="page1_bottom">
<ul>
<li>联系我们</li>
<li>|</li>
<li>也要按照基本法</li>
<li>|</li>
<li>谈笑风声</li>
</ul>
</div>
</div>
<!--BOTTOM ENDS-->
</div>
<!--VISIABLE PART ENDS-->
<!--HIDE PART BEGINS-->
<div class="page1_hide">
<div class="calcContainer">
<table id="calculater">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >9</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>
</tr>
</table>
</div>
</div>
<!--HIDE PART ENDS-->
</div>
</div>
<script type="text/javascript" src="js/index.js">

</script>
</body>
</html>

 CSS:

body{
background: #f5f5f5;
}
#screen{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
min-width: 320px;
max-width:640px;
margin: 0 auto;
}
#page1_container{
position: relative;
left: 0%;
margin:0 auto;
width: 200%;

/*overflow: hidden;*/
}
.hw_layout{
margin:0 auto;
width: 50%;
height: 100%;
min-width: 320px;
max-width:640px;
float: left;
}
/*SEARCH BAR BEGINS*/
.hw_header{
position: fixed;
top:0;
left:0;
width: 100%;
height: 60px;
z-index:10;
border: 1px solid red;
}
.hw_header_box{
width: 100%;
height: 60px;
min-width: 320px;
max-width: 640px;
margin:0 auto;
background:rgba(240,240,240,1);
position: relative;
}
.hw_header_box a{
display: inline-block;
padding-left: 20px;
width: 50%;;
height: 100%;
float: left;
padding-top: 10px;
}
.hw_header_box ul{
display: inline-block;
/*border: 1px solid red;*/
width: 48%;
height: 100%;
float: right;
padding-top: 10px;
padding-right: 10px;
}
.hw_header_box ul li{
float: right;
margin-right: 5px;
display: block;
overflow: hidden;
width: 40px;
height: 40px;
/*border: 1px solid cornflowerblue;*/

}
.hw_header_box ul li:nth-child(2){

background: url(../img/firstPage/hw1_sprite.png)no-repeat;
background-position-x: -34px;
background-position-y: -65px;

}
.hw_header_box ul li:nth-child(1){
color: red;
background: url(../img/firstPage/hw1_sprite.png) no-repeat;
background-position-x: 7px;
background-position-y: -65px;
}

/*SEARCH BAR ENDS*/
/*PUBLIC PIC BEGINS*/
.img_content{
width: 100%;
/*height: 370px;*/
/*border: 1px solid red;*/
overflow: hidden;
position: relative;
top: 60px;
margin-bottom: 20px;
}
.img_content .img_content_img{
width: 100%;

/*border: 1px solid darkgreen;*/
overflow: hidden;
/*background-image: url(../img/firstPage/mate9_bg_cn.jpg);*/
background-size: 960px 700px;
}
.img_content_img img{
width: 100%;
height: 100%;
}
.half_series{
border-top: 2px #333333;
background: rgb(245,245,245);
}
.half_series a{
display: block;
float: left;
width: 48%;
height: 100%;
border: 1px solid lightgray;
margin: 0 2px;
}
.half_series p{
display: block;
width: 95px;
height: 20px;
background: salmon;
color: #FFFFFF;
text-align: center;
line-height: 20px;
margin: 5px auto;
}
.half_series span{
display: block;
width: 100%;
height: 20px;
text-align: center;
line-height: 20px;
margin: 0 auto;
}
.img_content .img_content_des{
width: 100%;
height: 120px;
text-align: center;
background:#FFFFFF;
/*border: 1px solid red;*/
/*color: #000;*/
}
.img_content .img_content_des h2{
margin: 10px 0 10px 0;
}


/*PUBLIC PIC ENDS*/
/*PRIVATE PIC BEGINS*/
#page1_des1,#page1_des2,#page1_desBottom{
background: rgb(50,50,50);
color: #FFFFFF;
}
.img_content .img1{
height: 250px;
}

/*.img_content .img2{
height: 400px;
}

.img_content .img3{
height: 285px;
}

.img_content .img4{
height: 196px;
}

.img_content .img5{
height: 196px;
}
.img_content .img6{
height: 196px;
}*/
.img_content .img7{
height: 185px;
}
.img_content #page1_news p{
display: block;
/*border-bottom: 1px solid lightgray;*/
width: 100%;
height: 40px;
text-align: left;
line-height: 40px;
padding-left: 10px;
padding-bottom: 5px;
font-size: 18px;
}
.img_content #page1_news a:nth-child(1)>p{
font-size: 20px;
font-weight: bold;
}
.img_content .img8 h2{
display: inline-block;
margin: 5px;
}

/*PRIVATE PIC ENDS*/
/*<!--BOTTOM BEGINS-->*/
.bottom_ul_container{
width: 100%;
height: 60%;
background: rgb(50,50,50);
color: #fff;

}
.bottom_ul_container ul li{
display:block;
padding-left: 5px;
background: rgb(50,50,50);
color: #fff;
width: 100%;
height: 40px;
line-height: 40px;
margin: 1px 0;
/*border: 1px solid red;*/
font-size: 18px;
}
.bottom_ul_container ul li p{
display: block;
width: 50%;
height: 100%;
float: left;
}
.bottom_ul_container ul li span{
display: block;
width: 10%;
height: 100%;
float: right;
}
.page1_bottom ul{
display: inline-block;
width: 100%;
height: 108px;
background: rgb(50,50,50);
color: #fff;
margin-top: 1px;
padding-left: 22%;
}
.page1_bottom ul li{
float: left;
line-height: 70px;
padding-left: 4px;
}
#page1_desBottom ul li{
display: inline-block;
width: 32px;
height: 29px;
background-image: url(../img/firstPage/logo_linkedin.png);
padding-left: 2px;

}

/*<!--BOTTOM ENDS-->*/

/*HIDE PART BEGINS*/
.page1_hide{
width: 50%;
height: 600px;
background: lightgray;
float: left;
}
.page1_hide .calcContainer{
margin: 100px auto;
/*width: 100px;
height: 100px;
background: lightblue;*/
}

#calculater{
margin: 2px;
margin-top: 30px;
border: solid 6px lightgray;
border-spacing: 0px;
}
#display{
width: 100%;
height: 80px;
border-bottom: solid 4px lightgray;
color: lightcoral;
font-family: helvetica;
font-size: 50px;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
width: 120px;
height: 80px;
border: solid 1px #FFFFFF;
background: darkgray;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
#equality{
cursor: pointer;
width: 120px;
height: 100%;
background: darkgray;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
.numberkey:hover{
background: lightcoral;
}
#equality:hover{
background: lightcoral;
}

/*HIDE PART ENDS*/

 

一个简单移动页面ionic打包成app

标签：新一代   html   poi   document   url   port   ora   min   ati   

原文地址：http://www.cnblogs.com/rlann/p/6246153.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！