JS实现仿UC浏览器前进后退效果的实例代码
测试浏览器为谷歌浏览器（谷歌toggledevicetoolbar）
varstartx,starty,endx,endy,moveX,moveY,seatX,seatY;
varclickState=false;
//获取输入框dom元素
vartext=document.forms[“form”];
//设置样式
functionsetCss(obj){
varcssStr=“z-index:5;width:37px;height:37px;position:absolute;left:”
+seatX+‘px;top:'+seatY+‘px;';
//将样式添加到div上，显示div
obj.style.cssText=cssStr;
}
//计算位置
functionsetPosition(obj){
if(obj==‘left'){
seatX=text.offsetLeft-37;//横坐标
}else{
seatX=text.offsetLeft+text.offsetWidth;//横坐标
}
seatY=(text.offsetTop+text.offsetHeight)/2;//纵坐标
}
//创建DIV
functioncreateDiv(obj){
//首先创建div
vardescDiv=document.createElement(‘div');
document.body.appendChild(descDiv);
//给div设置样式，比如大小、位置
setPosition(obj);
setCss(descDiv);
descDiv.innerHTML=”;
descDiv.id=obj;
descDiv.style.display=‘block';
addElementImg(descDiv.id);
}
//添加IMG
functionaddElementImg(obj){
vardiv=document.getElementById(obj);
//添加img
varimg=document.createElement(“img”);
//设置img属性，如id
img.setAttribute(“id”,“newImg”);
//设置img图片地址
img.src=“/Themes/TheThemeMachine/Images/”+obj+“.png”;
div.appendChild(img);
}
//删除DIV
functionremoveDiv(obj){
varel=document.getElementById(obj);
el.parentNode.removeChild(el);
}
//移动DIV
functionmoveDiv(obj,movex){
if(Math.abs(movex)<37){
vardiv=document.getElementById(obj);
setPosition(obj);
seatX=seatX+movex;
setCss(div);
}
}
//根据位移改变DIV的位置
functionreductionDiv(obj){
vardiv=document.getElementById(obj);
setPosition(obj);
setCss(div);
}
//计算移动坐标
functioncalculationMoveCoordinate(){
moveX=endx-startx;
moveY=Math.abs(endy-starty);
if(moveX>0)
moveDiv(“left”,moveX);
else
moveDiv(“right”,moveX);
}
//判断是否是PC端
functionIsPC(){
varuserAgentInfo=navigator.userAgent;
varAgents=newArray(“Android”,“iPhone”,“SymbianOS”,“WindowsPhone”,“iPad”,“iPod”);
varflag=true;
for(varv=0;v0){flag=false;break;}
}
returnflag;
}
//PC端鼠标按下
functionclick(){
clickState=true;
startx=event.clientX;
starty=event.clientY;
}
//PC端鼠标移动
functionpull(){
if(1==event.which)//判断左键是否按下
{
endx=event.clientX;
endy=event.clientY;
calculationMoveCoordinate();
}
}
//PC端和移动端位移结束
functionstopClick(){
if(Math.abs(moveX)>37&&moveY<20){
if(moveX<0){
history.Go(1);
}else{
history.go(-1);
}
}else{
reductionDiv(“left”);
reductionDiv(“right”);
}
}
////移动端注册事件
document.addEventListener(‘touchmove',function(event){
event.preventDefault();
},false);
//touchstart事件
functiontouchSatrtFunc(evt){
//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等
vartouch=evt.touches[0];//获取第一个触点
startx=Number(touch.pageX);//页面触点X坐标
starty=Number(touch.pageY);//页面触点Y坐标
}
//touchmove事件，这个事件无法获取坐标
functiontouchMoveFunc(evt){
//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等
vartouch=evt.touches[0];//获取第一个触点
endx=Number(touch.pageX);//页面触点X坐标
endy=Number(touch.pageY);//页面触点Y坐标
calculationMoveCoordinate();
}
//touchend事件
functiontouchEndFunc(evt){
//evt.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动等
stopClick();
}
//加载
if(IsPC()){
document.onmousedown=click;
document.onmousemove=pull;
document.onmouseup=stopClick;
}else{
document.addEventListener(‘touchstart',touchSatrtFunc,false);
document.addEventListener(‘touchmove',touchMoveFunc,false);
document.addEventListener(‘touchend',touchEndFunc,false);
}
createDiv(‘left');
createDiv(‘right');
以上所述是小编给大家介绍的JS实现仿UC浏览器前进后退效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！