先贴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{
100%;
height: 100%;
position: relative;
overflow: hidden;
min- 320px;
max-640px;
margin: 0 auto;
}
#page1_container{
position: relative;
left: 0%;
margin:0 auto;
200%;
/*overflow: hidden;*/
}
.hw_layout{
margin:0 auto;
50%;
height: 100%;
min- 320px;
max-640px;
float: left;
}
/*SEARCH BAR BEGINS*/
.hw_header{
position: fixed;
top:0;
left:0;
100%;
height: 60px;
z-index:10;
border: 1px solid red;
}
.hw_header_box{
100%;
height: 60px;
min- 320px;
max- 640px;
margin:0 auto;
background:rgba(240,240,240,1);
position: relative;
}
.hw_header_box a{
display: inline-block;
padding-left: 20px;
50%;;
height: 100%;
float: left;
padding-top: 10px;
}
.hw_header_box ul{
display: inline-block;
/*border: 1px solid red;*/
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;
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{
100%;
/*height: 370px;*/
/*border: 1px solid red;*/
overflow: hidden;
position: relative;
top: 60px;
margin-bottom: 20px;
}
.img_content .img_content_img{
100%;
/*border: 1px solid darkgreen;*/
overflow: hidden;
/*background-image: url(../img/firstPage/mate9_bg_cn.jpg);*/
background-size: 960px 700px;
}
.img_content_img img{
100%;
height: 100%;
}
.half_series{
border-top: 2px #333333;
background: rgb(245,245,245);
}
.half_series a{
display: block;
float: left;
48%;
height: 100%;
border: 1px solid lightgray;
margin: 0 2px;
}
.half_series p{
display: block;
95px;
height: 20px;
background: salmon;
color: #FFFFFF;
text-align: center;
line-height: 20px;
margin: 5px auto;
}
.half_series span{
display: block;
100%;
height: 20px;
text-align: center;
line-height: 20px;
margin: 0 auto;
}
.img_content .img_content_des{
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;*/
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{
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;
100%;
height: 40px;
line-height: 40px;
margin: 1px 0;
/*border: 1px solid red;*/
font-size: 18px;
}
.bottom_ul_container ul li p{
display: block;
50%;
height: 100%;
float: left;
}
.bottom_ul_container ul li span{
display: block;
10%;
height: 100%;
float: right;
}
.page1_bottom ul{
display: inline-block;
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;
32px;
height: 29px;
background-image: url(../img/firstPage/logo_linkedin.png);
padding-left: 2px;
}
/*<!--BOTTOM ENDS-->*/
/*HIDE PART BEGINS*/
.page1_hide{
50%;
height: 600px;
background: lightgray;
float: left;
}
.page1_hide .calcContainer{
margin: 100px auto;
/* 100px;
height: 100px;
background: lightblue;*/
}
#calculater{
margin: 2px;
margin-top: 30px;
border: solid 6px lightgray;
border-spacing: 0px;
}
#display{
100%;
height: 80px;
border-bottom: solid 4px lightgray;
color: lightcoral;
font-family: helvetica;
font-size: 50px;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
120px;
height: 80px;
border: solid 1px #FFFFFF;
background: darkgray;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
#equality{
cursor: pointer;
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*/