function on(curEle,type,fn){
curEle.addEventListener(type,fn,false);
}
var oBox = document.querySelector('.box');
//移动端采用click存在300ms延迟
// oBox.addEventListener('click',function(){
// this.style.webkitTransform = 'rotate(360deg)'
// },false)
//使用TOUCH事件模型实现点击操作(单击&&双击)
on(oBox,'touchstart',function(ev){
//ev:TouchEvent事件 属性 type、target、preventDefault(returnValue)、stopPropagation、changedTouches、touches
//changedTouches和touches都是手指信息的集合(touchList),touches获取到值的必要条件只有手指还在屏幕上才可以获取,所以在touchend事件中如果想获取手指离开的瞬间坐标只能使用changedTouches获取
var point = ev.touches[0];
this['strX'] = point.clientX;
this['strY'] = point.clientY;
this['isMove'] = false;
})
on(oBox,'touchmove',function(ev){
var point = ev.touches[0];
var newX = point.clientX,
newY = point.clientY;
//判断是否发生滑动,我们需要判断偏移的值是否在30PX以内
if(Math.abs(newX-this['strX'])>30 || Math.abs(newY-this['strY'])>30){
this['isMove'] = true;
}
})
on(oBox,'touchend',function(ev){
if(this['isMove'] === false){
//没有发生移动 点击
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
var delayTimer = window.setTimeout(function(){
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
}.bind(this),1000);
}else{
//滑动
this.style.background = 'red';
}
})
var oBox = document.querySelector('.box');
//单击
touch.on(oBox,'tap',function(ev){
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(360deg)';
var delayTimer = window.setTimeout(function(){
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
window.clearTimeout(delayTimer)
}.bind(this),1000)
})
//双击
touch.on(oBox,'doubletap',function(ev){
this.style.webkitTransitionDuration = '1s';
this.style.webkitTransform = 'rotate(-360deg)';
var delayTimer = window.setTimeout(function(){
this.style.webkitTransitionDuration = '0s';
this.style.webkitTransform = 'rotate(0deg)';
window.clearTimeout(delayTimer)
}.bind(this),1000)
})
//长按
touch.on(oBox,'hold',function(ev){
this.style.backgroundColor = 'red';
})
$('.box').singleTap(function(ev){
$(this).animate({
rotate:'360deg'
},1000,'linear',function(){
this.style.webkitTransform = 'rotate(0)'
})
})
$('.box').on('touchstart',function(){
$(this).css('background','red')
})
$.ajax({
url:'',
type:'get',
dataType:'json',
cache:false,
success:function(){
}
})
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有