一个简单移动页面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" />
</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*/

时间： 2024-10-11 20:17:03

一个简单移动页面ionic打包成app的相关文章

ThingsBoard 前端打包成 App 的方法

欢迎大家加入thingsboard 二次开发讨论群:121202538 ThingsBoard私有化部署之后,不免存在在手机上查看各仪表盘的需求.手机上虽然可以浏览器访问网址,但对用户而言不够专业.体验较差,因此有需要提供一个专门的App,来实现管理或查看功能. 对于这个App,存在两种方案:一是开发全新的App,通过调用ThingsBoard的API实现相应功能,该方法是完全的Native开发模式:二是将ThingsBoard的UI打包,以App的形式内置网页方式的浏览.前一种方式成本较高.周

HBuilder初探——强大的提示符及纯网页打包成APP

之前做手机页面,只是时效短.更新度高的零星几个,供APP内嵌调用.比如抽奖嘛.活动宣传啦. 现在的公司,不知是不是不知者无畏,整一个app全部用html5来实现,包括头部导航条.客户端只需封装一下,打个包就OK.实现的方式是网页放在服务器,像从浏览器访问一下,客户端只是充当一个浏览器的角色.这种方式app store应该是不允许的吧.但所做的只是供医院内部人员使用的一个项目,能实现在线学习课程.报名.考试.签到.查房.论文申报等功能就OK. 得知HBuilder这个东东,还是从客户口里听来的,他

使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别 看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app 总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献.将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试 生成app后遇到的第一个坑就是白屏,原因是页面找不到 为了解决跨域问题

html网站网址一键打包成App平台-开心App平台

开心APP在线打包平台可以快速封装网站变成APP,一键打包网站APP平台的出现,极大的降低的开发费用,几百块就可以制作一个体验不错的APP. 网站封装成APP的流程方便快捷!无需懂代码,会上网就能制作APP! 下面介绍使用开心APP平台将一个网站快速打包成APP 分七步进行 1.注册开心APP平台账号 2.创建APP.配置基本信息 3.配置扩展插件 4.配置打包项目 5.配置安卓证书 6.配置ios证书 7.编译APP 一.注册lbuilder平台账号 1.打开心APP官网http://www.

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

html5页面打包成App - Android或Iphone安装程序

下载安装前端开发工具:HBuilder 官网下载:http://www.dcloud.io/ 根据官网说明安装 * 打开登录HBuilder,把做好的H5页面通过添加app项目把H5的文件夹加入进来(项目列表内会生成文件夹和文件如manifest.json) * 按Ctrl+R启动项目模拟,双击左侧项目列表的manifest.json配置相关参数 * 然后选择顶部菜单项‘发行’→‘App打包’→设置相关参数→上传云端打包好下载下来(可以选择打包成Android或Iphone安装包) * 发送手机

浮动布局写了一个简单的页面

正在学习的路上...... 这两天写了一个比较简单的页面,主要使用了浮动和定位.左边的属于滚动页面,右边的list属于固定.先上图片: 主要使用了float:left/right. 1.下面是HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="

利用JS跨域做一个简单的页面访问统计系统

其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单. 几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段 服务器结构: 数据库表设计: 以上只是我简单列

利用JS跨域做一个简单的页面訪问统计系统

事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我们须要自己来设计统计系统.因为前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比較简单. 几个基本统计需求: 1.统计web每一个页面用户訪问量 2.统计用户訪问者的和IP地址信息 3.页面之间的跳转情况 4.訪问高峰时间段 server结构: 数据库表设计: 以上仅