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

测试浏览器为谷歌浏览器（谷歌toggle device toolbar）

var startx, starty, endx, endy, movex, movey, seatx, seaty; 
var clickstate = false; 
//获取输入框dom元素 
var text = document.forms[“form”]; 
//设置样式 
function setcss(obj) { 
var cssstr = “z-index:5;width:37px;height:37px;position:absolute;left:” 
+ seatx + ‘px;top:' + seaty + ‘px;'; 
//将样式添加到div上，显示div 
obj.style.csstext = cssstr;
}
//计算位置 
function setposition(obj) { 
if (obj == ‘left') { 
seatx = text.offsetleft - 37; //横坐标 
} else { 
seatx = text.offsetleft + text.offsetwidth; //横坐标 
} 
seaty = (text.offsettop + text.offsetheight) / 2; //纵坐标 
} 
//创建div 
function creatediv(obj) { 
//首先创建div 
var descdiv = 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 
function addelementimg(obj) { 
var div = document.getelementbyid(obj); 
//添加 img 
var img = document.createelement(“img”); 
//设置 img 属性，如 id 
img.setattribute(“id”, “newimg”); 
//设置 img 图片地址 
img.src = “/themes/thethememachine/images/” + obj + “.png”; 
div.appendchild(img); 
} 
//删除div 
function removediv(obj) { 
var el = document.getelementbyid(obj); 
el.parentnode.removechild(el); 
} 
//移动div 
function movediv(obj, movex) { 
if (math.abs(movex) < 37) { 
var div = document.getelementbyid(obj); 
setposition(obj); 
seatx = seatx + movex; 
setcss(div); 
} 
} 
//根据位移改变div的位置 
function reductiondiv(obj) { 
var div = document.getelementbyid(obj); 
setposition(obj); 
setcss(div); 
} 
//计算移动坐标 
function calculationmovecoordinate() { 
movex = endx - startx; 
movey = math.abs(endy - starty); 
if (movex > 0) 
movediv(“left”, movex); 
else 
movediv(“right”, movex); 
} 
//判断是否是pc端 
function ispc() { 
var useragentinfo = navigator.useragent; 
var agents = new array(“android”, “iphone”, “symbianos”, “windows phone”, “ipad”, “ipod”); 
var flag = true; 
for (var v = 0; v < agents.length; v++) { 
if (useragentinfo.indexof(agents[v]) > 0) { flag = false; break; } 
} 
return flag; 
} 
//pc端鼠标按下 
function click() { 
clickstate = true; 
startx = event.clientx; 
starty = event.clienty; 
} 
//pc端鼠标移动 
function pull() { 
if (1 == event.which) //判断左键是否按下 
{ 
endx = event.clientx; 
endy = event.clienty; 
calculationmovecoordinate(); 
} 
} 
//pc端和移动端位移结束 
function stopclick() { 
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事件 
function touchsatrtfunc(evt) { 
//evt.preventdefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
var touch = evt.touches[0]; //获取第一个触点 
startx = number(touch.pagex); //页面触点x坐标 
starty = number(touch.pagey); //页面触点y坐标 
}
//touchmove事件，这个事件无法获取坐标 
function touchmovefunc(evt) { 
//evt.preventdefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 
var touch = evt.touches[0]; //获取第一个触点 
endx = number(touch.pagex); //页面触点x坐标 
endy = number(touch.pagey); //页面触点y坐标 
calculationmovecoordinate(); 
}
//touchend事件 
function touchendfunc(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浏览器前进后退效果的实例代码，希望对大家有所帮助