设为首页 加入收藏

TOP

导航页的开发--手机web app开发笔记(四)(四)
2019-09-04 00:58:53 】 浏览:148
Tags:导航 开发 --手机 web app 笔记
tuButton"
onclick="CloseGuid()">跳过</div> <!-- 定义一个跳过按钮,单击跳出导航进入webApp主界面 -->

 

第三步:guid.html中引入myth.css,并补充样式。

 

<link rel="stylesheet" type="text/css" href="css/myth.css" />
<style type="text/css">
.guid-items {
/* 图片容器样式 */
position: fixed;/* 生成绝对定位的元素,相对于浏览器窗口进行定位 */
height: 100%;/* 容易高度100%,全屏 */
}
.guid-items img {/* 定义容器中的图片属性,所有外边距0,内边距同样为0 */
margin: 0px;
padding: 0px;
}
#GotuButton {/* 定义跳过按钮样式,宽50像素,,, */
width: 50px;/* 宽50像素 */
height: 50px;/* 高50像素 */
position: fixed;/* 相对于浏览器窗口绝对定位 */
z-index: 10000;/* 堆叠顺序为10000,也就是让该按钮要浮于图片上方,可以让用户看到 */
top: 50px;/* 距离上方50像素 */
right: 20px;/* 距离右方20像素,也就是右上角显示 */
background: #FF6600;/* 按钮背景色 */
text-align: center;/* 按钮中文字水平居中对齐 */
border-radius: 50px;/* 圆形按钮设置 */
line-height: 50px;/* 行间距为50像素 */
color: #FFFFFF;/* 按钮中文字颜色 */ }
</style>

 

 第四步:guid.html中引入myth.js,并编写JS代码。

 

<script src="js/myth.js" type="text/java script" charset="utf-8"></script>
<script type="text/java script">
var wininfo = myth.winInfo();//获取手机信息
var screenWidth = wininfo.width;//宽度
var guidbox = myth("#picbox");//获取id为"picbox"对象
guidbox.setWidth("400%");//设置id为"picbox"对象宽度400%,也就是4个屏幕的宽度,4张图片正好一排显示
var zguidbox = guidbox.dom[0];//获取java script对象
myth("#picbox img").each(function(cObj) {//获取id为"picbox"对象下面的所有图片,并循环
myth(cObj).setWidth('25%');//设置每张图片宽度为25%,正好是1个屏幕大小
})
var currentImg = 1;//当前屏幕显示图片序号
var startX, endX;//定义开始手指按住屏幕x轴坐标,和手指离开屏幕x轴坐标
var isPress = false;//判断手指是否按住屏幕
var gundong=0;//手指按住屏幕后,滑动距离
zguidbox.addEventListener("touchstart", function(e) {//监听手指按住屏幕事件
isPress = true;//手指按钮变量设为true
startX = e.touches[0].clientX;//记录手指按住坐标
});
zguidbox.addEventListener("touchmove", function(e) {//监听手指滑动事件
if (isPress) {//判断是否按住住屏幕
endX = e.touches[0].clientX;//记录滑动最后坐标
gundong = startX - endX;//计算滑动距离
if (gundong < 0) return;//滑动距离小于0,说明是向右滑动,不进行任何操作,直接退出
var juli = -1 * (currentImg - 1) * screenWidth - gundong;//向左滑动时,计算图片需要滑动的距离
zguidbox.style.transform = 'translate3d(' + juli + 'px, 0px, 0px)';//图片相应滑动
}
});
zguidbox.addEventListener("touchend", function(e) {//监听手指离开屏幕事件
if (gundong <= 0) return;//如果距离向左滑动,或未滑动直接退出
if (gundong > 0) {//如果向右滑动
var juli = -1 * currentImg * screenWidth;//计算滑动到相应序号图片的距离
zguidbox.style.transform = 'translate3d(' + juli + 'px, 0px, 0px)';//图片滑动到相应图片
zguidbox.style.transition = '300ms';//添加滑动时间,手指离开屏幕后,图片300毫秒,滑动到指定距离
currentImg++;//当前显示图片序号加一
if (currentImg == 5) {//如果是最后一张图片滑过
myth.wirteStorage("isguid", "true");//本地存储key为"isguid"设置为true,说明已经第一次启动程序
myth.close();//退出引导页
}
}
isPress = false;//手指按住屏幕变量设置为false
});
function CloseGuid() {
myth.wirteStorage('isguid',"true");//本地存储key为"isguid"设置为true,说明已经第一次启动程序
myth.close();//退出引导页
var isguid = myth.readStorage('isguid');//获取本地存储key为"isguid"的数值
console.log(isguid);
}
</script>

 

五、调试

导航页,到目前为止已经全部编写完毕,下一步这个过程非常重要

首页 上一页 1 2 3 4 5 下一页 尾页 4/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【Android】Android Studio NDK .. 下一篇Flutter学习笔记(25)--ListView..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目