JS实现仿UC浏览器前进后退效果的实例代码

2024-01-28 01:30:03 409

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浏览器前进后退效果的实例代码

热门推荐

随机推荐