关键词：
【如何做一个简单的手机端页面的翻页】第一步：创建移动端页面内 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
web前端移动端课程之canvas教程系列(代码片段)
canvascanvas介绍canvas是一个客户端浏览器里的画图技术，canvas也是h5的一个新标签，canvas标签就已经提供了一张所谓的画布，那么再通过js的canvas一些操作就可以达到最终画图的效果canvas的基本使用主要就是如何通过js操... 查看详情
web前端移动端课程之canvas教程系列(代码片段)
canvascanvas介绍canvas是一个客户端浏览器里的画图技术，canvas也是h5的一个新标签，canvas标签就已经提供了一张所谓的画布，那么再通过js的canvas一些操作就可以达到最终画图的效果canvas的基本使用主要就是如何通过js操... 查看详情
web前端主要做的是啥工作
Web前端可以做的工作，可以分为以下几点：1、Web前端是什么意思Web前端是网站前台部分，运行在PC端，移动端等浏览器上展现给用户所浏览的网页。用我们的话来说，前端就是网页给访问网站的人看的内容和页面，Web前端开发意... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
web前端之移动端课程开发之06.bootstrap(代码片段)
Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情
web前端开发的主要作用
前端开发的主要作用有以下几点：1、Web前端开发工程师的工作涉及到网页的前端/后端系统，主要使用的技术有:HTML、CSS、JavaScript，现代Web前端开发已不能再简单地描述为切割图、CSS、JS等传统Web开发。2、新的HTML5规范增加了许... 查看详情
web前端培训都有哪些课程
...技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发：版本控制工具、NodeJS核心技术第四阶段前端框架：Vuejs全家桶-Vue、React框架-React、微信小程序、Flutter第五阶段小程序开发：能够独立开发小程序，提... 查看详情
web前端技术基础课程详解之javascript面向对象
JavaScript中的面向对象是个老生常谈的话题，但是依然有很多小伙伴处于懵逼状态。面试时候最担心的就是被问到面向对象相关的内容，自己看过无数的资料，依然对面向对象百思不得其解。到底什么是原型？什么是构造函数？... 查看详情
web前端开发主要学哪些课程？
老实说，前端经过这几年的快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的学习方法和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。针对0基础，非科班，没... 查看详情
如何利用angularjs打造一款简单web应用
angularjs是一个前端web框架，官方文档和教程都比较多，你可以看下:英文文档：中文：我给你说一下angular.js的含义吧。前端框架的意思是，在前端用js来动态控制输出的内容。这样即使后端不太复杂，前端也能实现许多以前只能... 查看详情
js怎么调用手机上的应用市场
...权限接口才可以调用的。 参考技术Djs方法的调用,达内Web前端培训,课程内容为王,教给学员的全是干货!js方法的调用达内Web前端培训,达内Web前端课程内容紧随市场需求!js方法的调用,达内Web前端培训,课程内容为王,教给学员的全是... 查看详情
前端之html内容
一、HTML介绍1、Web服务本质 当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程。本质顺序是：浏览器发请求——>HTTP协议——>服务端接... 查看详情
web前端培训课程都学习啥内容？
1.第一阶段：前端页面重构内容包含了：PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目2.第二阶段：JavaScript高级程序设计内容包含：原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主... 查看详情
web前端技术基础课程详解之javascript面向对象
JavaScript中的面向对象是个老生常谈的话题，但是依然有很多小伙伴处于懵逼状态。面试时候最担心的就是被问到面向对象相关的内容，自己看过无数的资料，依然对面向对象百思不得其解。到底什么是原型？什么是构造函数？... 查看详情
web前端面试，被问到ajax如果获取到一个页面的内容，如何渲染到页面呢
参考技术A动态插入页面里面咯 查看详情
web前端课程大纲技术之css兼容性详解
1，兼容性是什么？同样的HTML+CSS+JS，但是表现出的外部特征还是不能达到统一，存在瑕疵。同样的代码，有的浏览器效果显示"正常"，有的显示"不正常"。就像同样的去吃大排档，就有的人吃完一点事没有，而有的... 查看详情
移动端web开发初探之vuejs的简单实战
...移动端全屏背景CSS移动端动画初探meta标签这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的标签。< 查看详情
web前端和后端的不同点是啥呢？
计算机二级的一个选择题，这啥？我翻遍了书也没看见前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面：知识结构与实现和工作职责。对于如何学习WEB... 查看详情