web前端课程技术内容之如何做一个简单的手机端页面的翻页
【如何做一个简单的手机端页面的翻页】
第一步:创建移动端页面内 HTML + CSS 【注】可用弹性布局 但需要注意的是 外层盒子的定位
第二步: 思考问题 要实现怎样的效果?
- 手指滑动时触发事件【左右】两个方向
2.点击footer部分的下标实现切换效果
3.点击footer部分的下标实现下标颜色变化
第三步;编写JS代码
添加监听事件
document.addEventListener(‘DOMContentLoaded’,function(){
创建一个数组用于调用数组属性值 或者 方便【数值】的更改 【注】可以用数组 /对象 但对象更方便我们的使用
var postion = {
startX:0,
startY:0,
endX:0,
endY:0,
baseMoveX: window.innerHeight / 3,
index:1
}
获取页面元素 比不可少的一个步骤
var tab2 = document.getElementsByClassName(‘tab2’)[0];//获取到ul 思路: 用ul定位来实现页面的切换 (ul的宽度设置成 innerWind * 4)
var li2 = document.getElementsByClassName(‘li2’);//索引值不确定 且不写先
var tab3 = document.querySelector(’#tab3’);
var li3 = document.querySelectorAll(’.li3’);
li3[0].style.color = ‘#58bc58’;//设置默认的第一个下标的颜色
//封装一个函数用于清空下标 的颜色
function delite(){
for(var i = 0;i < li3.length; i++){
li3[i].style.color = ‘’;
}
}
手指事件【注】 这里的原理和拖拽一抹一样 (手指按下和 手指移动是 时 必须给给记录 光标位置)
手指移动到位置上时候触发 记录鼠标移动坐标
tab2.addEventListener(‘touchstart’,function(e){
postion.startX = e.touches[0].clientX;
postion.startY = e.touches[0].clientY;
})
手指移动位置胡时候触发 记录鼠标移动坐标
tab2.addEventListener(‘touchmove’,function(en){
postion.endX = en.touches[0].clientX;
postion.endY = en.touches[0].clientY;
move();//当手指滑动时触发函数 改变ul的定位
})
手指移开的时候定位
tab2.addEventListener(‘touchend’,function(vent){
move(true);//手指松开时调用调用函(函数用于判断 :滑动的距离是否超过绝对值 1.超过 (滑动到下一页) 2.不超过 (位置定位在当前页))
})
function move(_end){
var x = postion.startX - postion.endX;
var y = postion.startY - postion.endY;
滑动效果
if(postion.index < li2.length){//第一种情况==========left [用if 判断:索引值是 1-3的时候可以 向左滑动 改变 ul的定位 【注】因为超出会造成用户滑动出现空白页面 ]
if(x > 0){//计算公式: 起点位置 - 终点位置 = x; 如果 x > 0 说明滑动的方向是左边
to left
阅读更多- 一个javaweb新手,eclipse如何配置tomcat,让纯前端页面在浏览器跑起来
- Web前端面试指导(四十二):如何在页面上实现一个圆形的可点击区域?
- javaweb之Session简单例子(两个页面一个存数据,一个取数据)和session的一些基本内容
- 【WEB开发技术】一个简单的WEB项目验证码校验(如何从前端到后台一步一步的搭建、配置、发布整个Web项目?)
- (转载)ViewFlipper 如何翻页(页面内容是WebView)
- 两种Web页面局部刷新技术的简单较量
- 写一个简单的java web页面必须的步骤
- 前端的小玩意(9.2)——做一个仿360工具箱的web页面(全部工具里面的模板)
- 一是最简单的例子让你学会如何使用XML来做一个页面
- 浅析基于WEB前端页面的页面内容搜索的实现思路
- 如何成为一个web前端,怎样系统的去学习![A篇]
- 请问如何在Web页面中点击一个button之后,用jsp从数据库中读取数据显示到表格里
- Mobile&nbsp;Web&nbsp;App一个页面的简单的东…
- 如何用Java写一个简单的代理Web服务器
- 论如何在手机端web前端实现自定义原生控件的样式
- 前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)
- web前端课程包括哪些技术 你了解吗
- Linux内核分析课程--完成一个简单的时间片轮转多道程序内核代码,理解操作系统是如何工作的
- 一个简单的前端页面
- 秋色园QBlog技术原理解析:Web之页面处理-内容填充(八)