pc变手机端html,让移动端的事件变为PC端的事件

最近看到了一个手机端的小程序,可是在电脑端无法使用,原因是其中一个js是手机端js,怎么将这个js专为PC端可以使用的js

function tabLoad(obj,oJson){

var This=this; //构造出来的对象

var oDir=oJson.dir?oJson.dir:"y";

var oPrevent=oJson.prevent!='undefinde'?oJson.prevent:true;

if(!oJson.prevent){

document.addEventListener("touchstart",function(e){e.preventDefault();},false);

document.addEventListener("touchmove",function(e){e.preventDefault();},false);

document.addEventListener("touchend",function(e){e.preventDefault();},false);

}

this.target=oJson.flag?oJson.flag:false;

this.link=oJson.link; //接口地址

this.aLink=oJson.data; //接口参数

this.oGetMessage=this.getWindow();

this.oParent=document.querySelector(obj);

this.oClassFinc=this.oParent.querySelector(".classIfication");

this.aLi=this.oParent.querySelectorAll("li");

this.oIndex=oJson.add?oJson.add:0;//判断是哪个页面显示出来

this.oVideo=this.oParent.querySelector(".All_video");

this.oSwiper=this.oParent.querySelector(".swiper_video");

this.aJieS=this.oParent.querySelectorAll(".jiepan_swiper");

this.oJp=this.oParent.querySelectorAll(".jiepan");

this.oWidth=this.oJp[0].offsetWidth;

this.oSwiper.style.width=this.oWidth*this.oJp.length+'px';

this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oJp.length+'px)';

//这里是滑屏配置变量

this.oFn=oDir=='y'?"offsetHeight":'offsetWidth';

this.oPage=oDir=='y'?"pageY":"pageX";

this.dir=oDir=='y'?'Y':'X';

this.oTran=oDir=='y'?"translateY":"translateX";

this.setHeight();//设置高度

window.οnresize=function(){ //页面发生变化的时候

This.oGetMessage=This.getWindow();

This.setHeight();

};

for(var i=0;i

(function(index){

This.aJieS[i].style.cssText="";

This.aJieS[i].dataset.translateX=0;

This.aJieS[i].dataset.translateY=0;

This.aJieS[i].indexs=0;

This.aJieS[i].index=index;

This.aJieS[i].innerHTML="";

This.aJieS[i].Loding=false;

This.aLi[i].flag=true;

This.aLi[i].className="";

if(!This.aLi[i].addEvent){

This.aLi[i].addEventListener("touchend",This.iOpen.bind(This,index),false);

This.aLi[i].addEvent=true;

}

}(i))

};

this.iOpen(this.oIndex);//第一次的触发

};

tabLoad.prototype={

"constructor":tabLoad, //修正函数指向

"getWindow":function(){

return {

"clientWidth":document.documentElement.clientWidth||document.body.clientWidth,

"clientHeight":document.documentElement.clientHeight||document.body.clientHeight

}

},

"hasClass":function(obj,attr){

var oIndex="";

for(var i=0;i

if(obj[i].className.indexOf(attr,0)!=-1){

oIndex=i;

break

}

}

return oIndex

},

/*任意进制加密*/

"EnChTo":function(text,h){

window.localStorage.setItem("base36",h);

var monyer = new Array();var i,s;

for(i=0;i

monyer+=text.charCodeAt(i).toString(h)+" ";

}

return monyer;

},

/*任意进制解密*/

"DeChTo":function(text){

var monyer = new Array();var i;

var s=text.split(" ");

for(i=0;i

monyer+=String.fromCharCode(parseInt(s[i],window.localStorage.getItem("base36")));

}

return monyer;

},

"setHeight":function(){

this.oVideo.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';

this.oSwiper.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';

this.oJp.forEach((item,index)=>{

item.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+'px';

});

},

"iOpen":function(oIndex){

this.aLi[this.oIndex].classList.remove("active");

this.oIndex=oIndex;

this.oSwiper.style.transition="transform 0.6s cubic-bezier(0.64, -0.35, 0.35, 1.47)";

this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oWidth+"px)";

this.aLi[this.oIndex].classList.add("active");

if(this.aLi[this.oIndex].flag){

this.aJieS[this.oIndex].dataset.comment&&this.triggle(this.aJieS[this.oIndex],this.aJieS[this.oIndex].dataset.comment)

this.aLi[this.oIndex].flag=false;

this.getData({

"link":this.aLink[this.oIndex],

"oIndex":this.oIndex

});

if(!this.aJieS[this.oIndex].addEvent){

this.Sliding_screen({

el:this.aJieS[this.oIndex],

});

};

}

},

"getData":function(data){

var This=this;

var oShowE=this.aJieS[data.oIndex];

//这里进行接口调用

var oData=data.link?data.link:{};

oShowE.indexs+=1;

oData.page=oShowE.indexs;

var url=$.type(this.link).toLowerCase()=='array'?this.link[data.oIndex]:this.link;

$.ajax({

"url":url,

"data":oData,

"dataType":"json",

"type":"get",

"success":res=>{

if(res.data){

var oTemp=oShowE.dataset.template?oShowE.dataset.template:"Template1";

for(var i=0;i

oShowE.innerHTML+=this[oTemp](res.data[i],i);

}

var oLoading=oShowE.querySelector(".Loading");

if(oLoading){

oLoading.remove();

oShowE.Loding=false;

}

this.after&&this.after();

}else{

oShowE.Loding=true;

if(oShowE.indexs!=1){

var oLoading=oShowE.querySelector(".Loading");

oLoading.remove();

oShowE.innerHTML+="

没有更多数据了...

"

setTimeout(function(){

var obj=oShowE.children[oShowE.children.length-1];

obj.remove();

This.oMaxS=(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20)>0?0:(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20);//最大上拉值

oShowE.style.transform=This.oTran+"("+This.oMaxS+"px)";

oShowE.dataset[This.oTran]=This.oMaxS;

},5000);

}else{ //第一次没有数据

oShowE.style.height="100%"

oShowE.innerHTML+="

\
\

beijin.jpg\

暂时没有数据
╥﹏╥

\
\
"

}

};

},

"error":function(res){

}

})

},

"Prompt":function(res){ //提示窗口

var oHtml=`

您尚未开通${res.text}服务,请联系客服为您开通!!!

`

return oHtml

},

"getTime":function(data){

var date=new Date(data*1000);

return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDay()

},

"Template1":function(oData,i){

var oHtml=`

图片丢失了

${oData.title}

${oData.create_time}

${oData.tv_page_view}

${oData.tv_like_num}

`

return oHtml

},

"Sliding_screen":function(config){

var This=this; //构造的对象;

var obj=config.el;

this.oMaxS=(obj.parentNode[this.oFn]-obj[this.oFn]-20)>0?0:(obj.parentNode[this.oFn]-obj[this.oFn]-20);//最大上拉值

this.oBegin=0;

this.oStart=0;this.oPrevDis=0,this.oPrevTime=0; //按上去

this.oMove=0,this.iSpeedDis=0,this.iSpeedTime=0; //滑动的时候

obj.addEventListener("touchstart",this.start.bind(this,obj),false);

obj.addEventListener("touchmove",this.move.bind(this,obj),false);

obj.addEventListener("touchend",this.end.bind(this,obj),false);

obj.addEvent=true;

},

"start":function(This,e){

This.style.transition="none";

this.oStart=e.changedTouches[0][this.oPage];

this.oPrevDis=this.oStart;

this.moves=null;

this.startTime=new Date().getTime()

this.oPrevTime=this.startTime;

this.iSpeedDis=this.iSpeedTime=0;

this.oBegin=parseInt(This.dataset[this.oTran]);

},

"move":function(This,e){

this.oMaxS=(This.parentNode[this.oFn]-This[this.oFn]-20)>0?0:(This.parentNode[this.oFn]-This[this.oFn]-20);

console.log(This.parentNode[this.oFn],This[this.oFn])

This.style.transition="none";

var oDate=new Date().getTime();

this.oTarget=0;

this.oMove=e.changedTouches[0][this.oPage];

if(this.moves==null&&this.oMove==this.oStart){

this.moves=false

return

};

var oSpeend=this.oMove-this.oStart; //滑动的值

this.iSpeedDis=this.oMove-this.oPrevDis; //路程差

this.oPrevDis=this.oMove

this.iSpeedTime=oDate-this.oPrevTime; //时间差

this.oPrevTime=oDate;

if(this.oBegin+oSpeend>0){ //超出时,使用户滑动屏幕不方便;

this.oTarget=this.oBegin+oSpeend*0.3;

}else if(this.oBegin+oSpeend

this.oTarget=this.oBegin+oSpeend*0.3;

}else{

this.oTarget=this.oBegin+oSpeend;

};

This.style.transform=this.oTran+"("+this.oTarget+"px)";

if(this.oTarget>0){

This.dataset[this.oTran]=0;

}else if(this.oTarget

This.dataset[this.oTran]=this.oMaxS;

}else{

This.dataset[this.oTran]=this.oTarget;

}

},

"end":function(This,e){

var _this=this;

var oEndTime=new Date().getTime();

if(!this.moves&&oEndTime-this.startTime<100&&this.target){

var flag=null;

if($(e.target).parents(".Grand_Template").hasClass("Grand_Template")){

flag=$(e.target).parents(".Grand_Template")

}else if($(e.target).hasClass("Grand_Template")){

flag=$(e.target)

};

if(flag){

var Grade=flag.data().grade_id; //等级ID;

var allGrade=window.localStorage.getItem("grade").split("");

var nowGrade='1';

for(var i=0;i

if(allGrade[i]==Grade){

nowGrade=allGrade[i];

break

}

};

if(nowGrade||Grade==0){

var str='';

var json=flag.data();

for(var attr in json){

str+="&"+attr+'='+json[attr]

}

for(var attr in this.aLink[this.oIndex]){

str+="&"+attr+'='+this.aLink[this.oIndex][attr]

}

window.localStorage.setItem("url",str);

window.location.href="v_play.html"

}else{ //等级不满足

$.ajax({

"url":"http://testyii.webf10.com/customer/tvinfo?action=get_grade_name",

"type":"get",

"jsontype":"json",

"data":{

grade_id:Grade

},

"success":res=>{

if(res.status==0){

var html=this.Prompt({

"text":res.data.grade_name,

"phone":"10086"

});

$("body").append(html);

var Prompt=document.querySelector(".masks");

Prompt.style.display="block";

setTimeout(function(){

Prompt.classList.add("show");

},30);

var aLis=Prompt.querySelectorAll("li");

aLis.forEach((item,index)=>{

item.addEventListener("touchstart",function(e){

e.stopPropagation();

item.classList.add("active")

},false);

item.addEventListener("touchend",function(e){

e.stopPropagation();

item.classList.remove("active");

if(index==0){

Prompt.addEventListener("webkitTransitionEnd",end,false);

Prompt.classList.remove("show");

function end(e){

Prompt.removeEventListener("webkitTransitionEnd",end,false);

setTimeout(function(){

Prompt.remove();

},300);

}

}

},false);

});

}

},

"error":function(res){

}

})

}

}

}

var oSpeed=Math.round(this.iSpeedDis/this.iSpeedTime*10); //速度

oSpeed=this.iSpeedTime==0?0:oSpeed;

oSpeed=(oEndTime-this.oPrevTime)>300?0:oSpeed; //判断用户是否是最后停止滑动时,留在了屏幕上一段时间

var iTarget=parseInt(This.dataset[this.oTran]);

var oTarget=oSpeed*20+iTarget;

var cub="cubic-bezier(.1,.69,.1,1)"; //默认配置

var Time=Math.round(Math.abs(oTarget)-Math.abs(iTarget)*0.8);

Time=Time<200?200:Time;

Time=Time>1000?1000:Time;

if(oTarget>0){

oTarget=0;

cub="cubic-bezier(.31,1.23,.59,1.13)";

}else if(oTarget

cub="cubic-bezier(.31,1.23,.59,1.13)";

//下拉加载

if(!This.Loding){

This.Loding=true;

var oP=document.createElement("p");

oP.className="Loading";

This.appendChild(oP);

_this.getData({

"link":_this.aLink[This.index],

"oIndex":This.index

});

}

this.oMaxS=(This.parentNode[this.oFn]-This[this.oFn]-20)>0?0:(This.parentNode[this.oFn]-This[this.oFn]-20);

oTarget=this.oMaxS;

};

This.style.transition=Time+'ms';

This.style.transitionTimingFunction=cub;

This.style.transform=this.oTran+"("+oTarget+"px)";

This.dataset[this.oTran]=oTarget;

},

"triggle":function(obj,prevent,config){

var oJson=obj.oJson;

if(oJson&&oJson[prevent]){

for(var i=0;i

if(config){

oJson[prevent][i].call(obj,config)

}else{

oJson[prevent][i].call(obj)

}

}

}

},

"bind":function(obj,events,fn){

obj.oJson=obj.oJson||{};

obj.oJson[events]=obj.oJson[events]||[];

obj.oJson[events].push(fn);

},

}

我试过将其中的touch事件变为click事件,但是还是无法很好的解决,有什么办法能直接将这个js转为PC端可用的吗

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值