一个简单移动页面ionic打包成app
先贴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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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" alt="" />
</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的更多相关文章
- H5 app在真机调试的时候正常,打包成app后报错
在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...
- 一个简单的CS系统打包过程图文版
一个简单的CS系统打包过程图文版 1. 打包内容 1.1. 此次打包的要求和特点 主工程是一个CS系统: 此CS系统运行的先决条件是要有.Net Framework 3.5: 主工程安装完成 ...
- PHP写的手机端网站，可以打包成app吗，怎么打包？
8:13:36 沐歌-重庆 2018/1/19 8:13:36 PHP写的手机端网站,可以打包成app吗,怎么打包 风太大-淮安 2018/1/19 8:14:58 变色龙 沐歌-重庆 一般用什么打包 ...
- vue打包成app后，点击手机上的物理返回按钮后直接退出app
在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...
- html5页面打包成App - Android或Iphone安装程序
下载安装前端开发工具:HBuilder 官网下载:http://www.dcloud.io/ 根据官网说明安装 * 打开登录HBuilder,把做好的H5页面通过添加app项目把H5的文件夹加入进来( ...
- 将H5页面的应用打包成APP(苹果和安卓版本)
今天在清理手机上的应用时看到了“联名会员”这个“app”,我感觉只是个H5页面,不是一个原生的APP,但看起来和原生APP一模一样,心想,如果以后我开发了H5应用是不是可以把它搞成APP形式供别人下载 ...
- 窥探原理：实现一个简单的前端代码打包器 Roid
roid roid 是一个极其简单的打包软件,使用 node.js 开发而成,看完本文,你可以实现一个非常简单的,但是又有实际用途的前端代码打包工具. 如果不想看教程,直接看代码的(全部注释):点击地 ...
- 使用HBuilderX打包成app之后点击返回按钮让它返回上一个页面
首先:下载引入mui.min.js文件,MUI框架mui-min.js文件github地址 https://github.com/dcloudio/mui 下载之后并在index.html文件中引入如 ...
- cordova 一个将web应用程序封装成app的框架
cordova的详细介绍请参考这个链接:http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建. 1.首先你需要下载几样东西 1.jdk. 2.andr ...
随机推荐
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- [Spring]04_最小化Spring XML配置
4.1 自动装配 Bean Spring 装配 bean 时,有时非常明确,就是需要将某个 bean 的引用装配给指定属性. 例如,若应用上下文中只有一个 javax.sql.DataSource 类 ...
- scrapy cookies：将cookies保存到文件以及从文件加载cookies
我在使用scrapy模拟登录新浪微博时,想将登录成功后的cookies保存到本地,下次加载它实现直接登录,省去中间一系列的请求和POST等.关于如何从本次请求中获取并在下次请求中附带上cookies的 ...
- iOS冰与火之歌(番外篇) - 基于PEGASUS（Trident三叉戟）的OS X 10.11.6本地提权
iOS冰与火之歌(番外篇) 基于PEGASUS(Trident三叉戟)的OS X 10.11.6本地提权 蒸米@阿里移动安全 0x00 序 这段时间最火的漏洞当属阿联酋的人权活动人士被apt攻击所使用 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- canvas调用scale或者drawImage图片操作后，锯齿感很明显的解决
<script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...
- Effective java笔记（一），创建与销毁对象
1.考虑用静态工厂方法代替构造器 类的一个实例,通常使用类的公有的构造方法获取.也可以为类提供一个公有的静态工厂方法(不是设计模式中的工厂模式)来返回类的一个实例.例如: //将boolean类型转换 ...
- 1.JAVA基础复习——计算机基础与环境变量配置
软件开发的了解 软件开发: 软件:一系列按照特定组织的计算机数据和指令的集合. 开发:制作软件. 程序:一系列有序指令的集合. 人机交互 人机交互的方式有两种:图形化界面和命令行方式. 图形化界面:简 ...
- 初探React，将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- ArcGIS中的标注和注记
在ArcMap中可以使用标注和注记来识别要素,选择标注或注记取决于你需要如何控制文本显示以及在ArcMap中如何存储文本. 1.标注只是临时显示相关数据或字段 2.标注用于长时间保存数据以及显示方式. ...