移动端网页特效
touch 触屏事件 / 触摸事件
概述
- 移动端浏览器兼容性较好，不需考虑 JS 兼容性问题，可放心使用原生 JS 书写效果
常见触屏事件
touchstart【手指触摸到 DOM 元素时触发】【有自己的事件对象】touchmove【手指在 DOM 元素上滑动时触发】【有自己的事件对象】touchend【手指从 DOM 元素上移开时触发】【有自己的事件对象】- 示例
<head><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>var div = document.querySelector('div');div.addEventListener('touchstart', function() {console.log('我摸了你');});div.addEventListener('touchmove', function() {console.log('我继续摸');});div.addEventListener('touchend', function() {console.log('轻轻的我走了');});</script>
</body>
触摸事件对象 TouchEvent
- 描述手指在触摸平面的状态变化的事件，可描述一 / 多个触点，使开发者检测触点的移动、增加和减少
touches【正在触摸屏幕的所有手指的一个列表】targetTouched【正在触摸当前 DOM 元素上的手指的一个列表】【重点】changedTouches【手指状态发生了改变的列表，从无到有，从有到无】
移动端拖动元素
e.preventDefault()：阻止默认的屏幕滚动【因为手指移动会触发滚动屏幕】- 示例
<head><style>div {position: absolute;left: 0;width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><script>var div = document.querySelector('div');var startX = 0; var startY = 0;var x = 0; var y = 0;div.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;});div.addEventListener('touchmove', function(e) {var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); });</script>
</body>
移动端常见特效
移动端轮播图
window.addEventListener('load', function() {var focus = document.querySelector('.focus');var ul = focus.children[0];var ol = focus.children[1];var w = focus.offsetWidth;var index = 0;var timer = setInterval(function() { index++;var translatex = -index * w;ul.style.transition = 'all .3s'; ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);ul.addEventListener('transitionend', function() { if (index >= 3) { index = 0;ul.style.transition = 'none'; var translatex = -index * w; ul.style.transform = 'translateX(' + translatex + 'px)';} else if (index < 0) {index = 2;ul.style.transition = 'none';var translatex = -index * w;ul.style.transform = 'translateX(' + translatex + 'px)';}ol.querySelector('.current').classList.remove('current');ol.children[index].classList.add('current');});var startX = 0;var moveX = 0;var flag = false;ul.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;clearInterval(timer);});ul.addEventListener('touchmove', function(e) {moveX = e.targetTouches[0].pageX - startX;var translatex = -index * w + moveX;ul.style.transition = 'none';ul.style.transform = 'translateX(' + translatex + 'px)';flag = true; e.preventDefault(); });ul.addEventListener('touchend', function(e) {if (flag) {if (Math.abs(moveX) > 50) {if (moveX > 0) {index--;} else {index++;}var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';} else { var translatex = -index * w;ul.style.transition = 'all .1s';ul.style.transform = 'translateX(' + translatex + 'px)';}}clearInterval(timer); timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);});var goBack = document.querySelector('.goBack');var nav = document.querySelector('nav');window.addEventListener('scroll', function() {if (window.pageYOffset >= nav.offsetTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}});goBack.addEventListener('click', function() {window.scroll(0, 0);})
})
<!-- 返回顶部模块 -->
<div class="goBack"></div>
<!-- 焦点图模块 -->
<div class="focus"><ul><li><img src="upload/focus3.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li><li><img src="upload/focus2.jpg" alt=""></li><li><img src="upload/focus3.jpg" alt=""></li><li><img src="upload/focus1.jpg" alt=""></li></ul><!-- 小圆点 --><ol><li class="current"></li><li></li><li></li></ol>
</div>
.goBack {display: none;position: fixed;bottom: 50px;right: 20px;width: 38px;height: 38px;background: url(../images/back.png) no-repeat;background-size: 38px 38px;
}
.focus {position: relative;padding-top: 44px;overflow: hidden;
}
.focus img {width: 100%;
}
.focus ul {overflow: hidden;width: 500%;margin-left: -100%;
}
.focus ul li {float: left; width: 20%;
}
.focus ol {position: absolute;bottom: 5px;right: 5px;margin: 0;
}
.focus ol li {display: inline-block;width: 5px;height: 5px;background-color: #fff;list-style: none;border-radius: 2px;transition: all .3s;
}
.focus ol li.current {width: 15px;
}
要点
- 移动端动画尽量使用 css3【js + css3】
- 移动端轮播图，首尾都要加图片
PC端轮播图，只有尾部加图片 transitionend 【检测过渡完成事件】
classList 属性
- HTML5 新增属性，返回元素的类名【ie10+支持】
- 用于在元素中添加，移除及切换 CSS 类
element.classList.add('类名')【添加类】【类名不加.】
element.classList.remove('类名')【移除类】【类名不加.】
element.classList.toggle('类名')【切换类】【类名不加.】className【追加类名，会覆盖】
classList【追加类名，不会覆盖】- 示例
<head><style>.bg {background-color: black;}</style>
</head><body><div class="one two"></div><button> 开关灯</button><script>var div = document.querySelector('div');div.classList.add('three');div.classList.remove('one');var btn = document.querySelector('button');btn.addEventListener('click', function() {document.body.classList.toggle('bg');})</script>
</body>
click 延时解决方案
- 移动端 click 事件会有 300ms 延时，原因是移动端屏幕双击会缩放页面
- 解决方案
1.禁用缩放
2.自己封装此事件function tap (obj, callback) {var isMove = false;var startTime = 0;obj.addEventListener('touchstart', function (e) {startTime = Date.now();});obj.addEventListener('touchmove', function (e) {isMove = true;});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) {callback && callback();}isMove = false;startTime = 0;});
}tap(div, function() {
3.使用插件【fastclick】【相较于1.2的优点是，页面中所有元素的 click 延迟都被取消】
移动端常用开发插件
插件概念
- JS 插件是 js 文件，遵循一定规范编写，方便程序展示效果，拥有特定功能，且方便调用。如轮播图和瀑布流插件
- 特点：一般是为解决某问题专门存在，功能单一，且比较小
- GitHub官网地址：
https://github.com/ftlabs/fastclick
使用插件
- 用法
1.引入 js 插件文件
2.按照规定语法使用 - 总结
1.确认插件实现的功能
2.去官网查看使用说明
3.下载插件
4.打开 demo 实例文件，查看需要引入的相关文件，并且引入
5.复制 demo 实例文件中的结构 html，样式 css 以及 js 代码 - 示例
<head><style>div {width: 50px;height: 50px;background-color: pink;}</style><script src="fastclick.js"></script>
</head><body><div></div><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}var div = document.querySelector('div');</script>
</body>
window.addEventListener('load', function() {var swiper = new Swiper('.swiper-container', {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 5000,disableOnInteraction: false,},pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});
})
.swiper-pagination-bullet {background: #fff!important;
}
常用插件
https://www.swiper.com.cn/【swiper】http://www.superslide2.com/【superslide】https://github.com/cubiq/iscroll【scroll】zy.media.js【视频插件】
①H5 提供了 video 标签，浏览器的支持情况不同
②不同的视频格式文件，可通过 source 解决
③外观样式、暂停、播放、全屏只能通过写代码解决
<head><link rel="stylesheet" href="zy.media.min.css"><script src="zy.media.min.js"></script><style type="text/css">#modelView {background-color: #DDDDDD;z-index: 0;opacity: 0.7;height: 100%;width: 100%;position: relative;}.playvideo {padding-top: auto;z-index: 9999;position: relative;width: 300px;height: 200px;}.zy_media {z-index: 999999999}</style>
</head><body><div class="playvideo"><div class="zy_media"><video data-config='{"mediaTitle": "小蝴蝶"}'><source src="mov.mp4" type="video/mp4">您的浏览器不支持HTML5视频</video></div><div id="modelView"> </div></div><script>zymedia('video', {autoplay: false});</script>
</body>
移动端常用开发框架
框架概述
- 一套会基于自身特点向用户提供一套较为完整解决方案的架构。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
- 插件： 小而专一，某个功能的解决方案。常见的有 Bootstrap、Vue、Angular、React 等
框架：大而全，一整套解决方案。常见的有 swiper、superslide、iscroll 等【PC端 / 移动端】
Bootstrap
- 简洁、直观、强悍的前端开发框架，让 web 开发更迅速、简单
- Bootstrap JS插件使用步骤：
1.引入相关 js 文件
2.复制 HTML 结构
3.修改对应样式
4.修改相应 JS 参数 - bootstrap 轮播图
<head><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="bootstrap/js/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script> <style>.focus {width: 800px;height: 300px;background-color: pink;margin: 100px auto;}.carousel,.carousel img {width: 100%;height: 300px!important;}</style>
</head><body><div class="focus"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators 小圆点 --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides 轮播图片 --><div class="carousel-inner" role="listbox"><div class="item active"><img src="upload/banner.dpg" alt="..."><div class="carousel-caption">这是我的图片1</div></div><div class="item"><img src="upload/banner1.dpg" alt="..."><div class="carousel-caption">这是我的图片2</div></div><div class="item"><img src="upload/banner2.dpg" alt="..."><div class="carousel-caption">这是我的图片3</div></div>...</div><!-- Controls 左右箭头 --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><script>$('.carousel').carousel({interval: 2000})</script>
</body>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
