手机端如何用JS实现触屏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端如何用JS实现触屏相关的知识，希望对你有一定的参考价值。
想做一个页面，需要可以触摸滑动导航，就是导航超出的部分隐藏，手指滑动的时候，隐藏的部分出来。如何用html5或者JS实现这个效果。分不多了，请大神帮忙。
//html5 新增 touch 事件//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event)
event.preventDefault();
, false);
//touchstart事件
function touchSatrtFunc(evt)
try
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
catch (e)
alert('touchSatrtFunc：' + e.message);
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt)
try
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//document.getElementById("version").innerHTML = "原:"+startY+" "+"现:"+y;
//判断滑动方向
if (y - startY > 100)
swipeDown();
else if(y - startY < -100)
swipeUp();
catch (e)
alert('touchMoveFunc：' + e.message);
//touchend事件
function touchEndFunc(evt)
try
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
catch (e)
alert('touchEndFunc：' + e.message);
//绑定事件
function bindEvent()
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
//判断是否支持触摸事件
function isTouchDevice()
//document.getElementById("version").innerHTML = navigator.appVersion;
try
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
catch (e)
alert("不支持TouchEvent事件！" + e.message);
参考技术A 手机端的触摸事件为touchstart，touchmove，touchend。如果使用第三方类库会封装更多的方法，比如，jQuery-mobile的tap，taphold等 参考技术B
在实现触屏中，必须采用js的addEventListener，接着加上touchstart,touchmove,touchend来实现触屏效果。
e.preventDefault（），假设不写这一句，在触屏的时候，页面就会滑动，所以它的作用是巨大的。
参考技术C 您可以了解一下jqm在手机端实现触屏,加载,或者自适应都不错
在移动端如何用swiper实现导航栏效果
我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能；而这个功能如果自己写的话会很麻烦，所以我在这推荐一下swiper这个插件。
其实swiper中的官网中也有这种功能的实现，但是我认为是有点麻烦的。而我在网上也没找到。所以我通过查找和研究弄出了这种方法（也可能有人这么用了）；
话不多说，上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> <style type="text/css"> .swiper-container{/*把主要的框写好*/ width:400px; height:400px; border:1px solid #aaa; } .swiper-slide{/*轮播的内容*/ width:100%; height:100%; text-align: center; line-height: 400px; } .swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/ border-bottom: 1px solid #aaa; width:100%; height:40px; display: flex; top:0; } .swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/ color:#808080; } .swiper-pagination-bullet{/*这个是小圆点的样式*/ background:transparent;/*背景色设置为需要的背景*/ -webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/ text-align: center; line-height: 40px; border-radius: 0;/*把小圆点重新设置为矩形*/ height: 40px; color:#000000; } .swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/ content:"Slide 1";/*所插入的内容*/ } .swiper-pagination-bullet:nth-child(2):before{ content:"Slide 2"; } .swiper-pagination-bullet:nth-child(3):before{ content:"Slide 3"; } .swiper-pagination-bullet:nth-child(4):before{ content:"Slide 4"; } .swiper-pagination-bullet:nth-child(5):before{ content:"Slide 5"; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </body> </html> <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var swiper = new Swiper(".swiper-container", { pagination: ".swiper-pagination",//显示小圆点 autoplay:2000, //轮播毫秒数 loop:true, //可以重复轮播，默认方式是false paginationClickable: true, //值为真时，当单击指示器时会执行过渡动画到目标slide speed:300, //slides滑动动画之间的持续时间 autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay // mode:‘horizontal‘, //slides滑动方式，水平或垂直 }); } </script>
这中方法我认为是非常简单的。希望对大家有用
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/swiper.min.css"/><style type="text/css">.swiper-container{/*把主要的框写好*/width:400px;height:400px;border:1px solid #aaa;}.swiper-slide{/*轮播的内容*/width:100%;height:100%;text-align: center;line-height: 400px;}.swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/border-bottom: 1px solid #aaa;width:100%;height:40px;display: flex;top:0;}.swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/color:#808080;}.swiper-pagination-bullet{/*这个是小圆点的样式*/background:transparent;/*背景色设置为需要的背景*/-webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/text-align: center;line-height: 40px;border-radius: 0;/*把小圆点重新设置为矩形*/height: 40px;color:#000000;}.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/content:"Slide 1";/*所插入的内容*/}.swiper-pagination-bullet:nth-child(2):before{content:"Slide 2";}.swiper-pagination-bullet:nth-child(3):before{content:"Slide 3";}.swiper-pagination-bullet:nth-child(4):before{content:"Slide 4";}.swiper-pagination-bullet:nth-child(5):before{content:"Slide 5";}</style></head><body><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div></body></html><script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function(){ var swiper = new Swiper(".swiper-container", { pagination: ".swiper-pagination",//显示小圆点 autoplay:2000, //轮播毫秒数 loop:true, //可以重复轮播，默认方式是false paginationClickable: true, //值为真时，当单击指示器时会执行过渡动画到目标slide speed:300, //slides滑动动画之间的持续时间 autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay// mode:‘horizontal‘, //slides滑动方式，水平或垂直 });}</script>
以上是关于手机端如何用JS实现触屏的主要内容，如果未能解决你的问题，请参考以下文章