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+="
\
暂时没有数据
╥﹏╥
\
\
"
}
};
},
"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端可用的吗
pc变手机端html,让移动端的事件变为PC端的事件相关推荐
- php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...
- 用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)...
AA.phpcms进行双语切换方法(不用解析二级域名) phpcms进行两种语言的切换,有一把部分的人都是进行的二级域名的解析,这样的话可能会有一部分的麻烦,我这里有一种方法可以不用解析二级域名就可以 ...
- 微信自定义分享在pc正常手机端不正常问题
微信自定义分享在pc正常手机端不正常,使用debug得到的结果都是ok,没问题.但是手机微信就是不行.经过排查后发现,分享的链接不能够直接使用授权链接.因此,为了获取用户信息,我的解决办法是新建一个新 ...
- window.open 兼容 PC 和手机端
window.open 由于浏览器安全策略的原因,在 PC 和手机端的表现可能会出现不同 更多精彩 更多技术博客,请移步 asing1elife's blog 导致不同的根本原因 由于 window. ...
- html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...
- html5手机端设置date,H5 input[type='date'] 优化 pc端和移动端的使用
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, ...
- 用ftp实现局域网pc和手机端文件共享
如何共享手机上的文件? 在局域网中在pc端或手机端共享自己手机上的文件: 用swift ,这是网上下载的几十kb的手机ftp服务器. 下载安装后设置: 设置一下用户名和密码,端口号不变.保存.s ...
- Thinkphp 5.1 PC和手机端加载不同路径下的模板~功能实现
现在开发虽然很多都是前后端分离了,但是还是很多项目没有前后端分离 现在要实现功能 就是手机端和电脑端增加不同路径下面的模板~ DEMO 仅供参考 1.在公共函数增加函数 isMobile 验证设备是 ...
- 响应式房产置业公司PHP网站源码、自适应PC和手机端
介绍: 此套源码整理测试感觉很不错,可惜我没有企业用不到,不然就自己用了~ PHP网站源码介绍: 此款源码适合基建.施工.地产.物业等房地产类企业拿来做自己的企业官网,前端采用自适应HTML5模板,自 ...
最新文章
- 史上最详细版Centos6安装详细教程
- JVM内存区域划分及其管理机制
- 一加会搭载鸿蒙,华为P50用液态镜头,小米11于29日发布,一加9一季度发布
- BZOJ 2427 软件安装(强连通分量+树形背包)
- ubuntu安装linux deepin,如何在Ubuntu中安装Deepin终端 | MOS86
- How to find Material based on Sales Organization and Distribution Channel
- 《集体智慧编程》笔记(1 / 12):集体智慧导言
- 类的定义 java 1613806383
- Linux学习笔记(单用户模式,救援模式,克隆主机,两个linux互相连接)
- win7系统计算机无最小化,win7纯净版系统任务栏无法显示网页最小化窗口怎么办...
- Pytest学习-如何在用例代码中调用fixtrue时传入参数
- MybatisPlus
- c语言,10行代码写一个简单鼠标连点器
- 2016310Exp4 恶意代码及分析
- 「案例分析」生鲜行业B2B供应链平台开发案例
- html中 导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
- java时间格式化与格式
- Python进程池之pool.map()函数传入多参数
- Android 屏蔽第三方SDK权限
- 数字货币合约统计套利1月17报告
热门文章
- IDEA连接PostgreSQL数据库
- JS中获取地址栏中的参数
- nextcloud+nginx+mysql_nextcloud网盘搭建:Ubuntu18.04+Nginx+Mysql
- 只学一门java可行吗,java可以作为第一门编程语言学习吗
- javamailsender注入失败_关于SpringBoot使用Redis空指针的问题(不能成功注入的问题)...
- 实现java内存队列消费事件-ConcurrentLinkedQueue
- 如何优雅的在java中统计代码块耗时
- Android开发笔记(十九)底部标签栏TabBar
- 记录一次nginx 配置https 强制http转发到https
- 【架构设计的艺术】Kafka如何通过精妙的架构设计优化JVM GC问题?