资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery手机端,jquery手机端防上拉加载更多

手机端触屏事件怎么写jquery

最近做移动端的项目,涉及触摸事件很频繁;我接下来介绍下三个基本的触摸事件:

创新互联建站专业为企业提供晋源网站建设、晋源做网站、晋源网站设计、晋源网站制作等企业网站建设、网页设计与制作、晋源企业网站模板建站服务,10年晋源做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

下面是我刚写的一个小demo,可以复制体验下,测试的话打开浏览器的开发者工具的手机模式,点击屏幕移动就能体验到了,滚动鼠标是无效的哦~

!DOCTYPE html

html

head

meta charset="UTF-8"

titless/title

style.sb{width: 100%;height: 200px;background-color: red}/style

script typet="text/javascript" src=""/script

/head

body

div style="height: 3000px"

div /div

/div

script

//touchmove  手指不放发生

$('body').on('touchmove',function(){

$('.sb').css({'display':'none'})  //隐藏div

})

//touchend   手指放开发生

$('body').on('touchend',function(){

$('.sb').css({'display':'initial','position':'fixed'})  //显示,固定div

})

/script

/body

/html

手机端jquery使用slideDown有卡顿感在苹果上没问题。安卓上会有卡顿,为什么呢??怎么能解决这个问题呢

安卓手机良莠不齐,有些性能较差的手机是会卡的,可以用css3的transition解决。

比如

div{ height:0; -webkit-transition: height .5s ease; }

div.show{ height: 100px;}

只要在原来需要slideDown的时候,改为为这个div添加 show的class即可。

jquery写的网页拷贝到手机上也能运行,jquery mobile也行,有什么讲究?

jquery兼容各大浏览器,主要作为pc端脚本,手机端当然也可以运行,但是有些时候可能效果不太好。而jquery mobile是jQuery的手机版,专门为手机定制的,如果做手机端的网页,最好是用jquery mobile。

jquery怎么判断是手机端横屏

//判断手机横竖屏状态:  

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {  

if (window.orientation === 180 || window.orientation === 0) {   

//alert('竖屏状态!');  

}   

if (window.orientation === 90 || window.orientation === -90 ){   

//alert('横屏状态!');  

}    

}, false);   

//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

jquery是不是在手机端不起作用? 下面这段代码在PC端可以正常运行,到手机端就不起作用了

当然,移动端浏览器对js的支持很有限,你必须为移动端单独设计页面,另外推荐使用jQuery Mobile


网页标题:jquery手机端,jquery手机端防上拉加载更多
本文路径:http://cdkjz.cn/article/dssodei.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220