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


Posted in Javascript onJuly 17, 2017

测试浏览器为谷歌浏览器(谷歌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浏览器前进后退效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
jquery 指南/入门基础
Nov 30 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
学习Node.js模块机制
Oct 17 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 #Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
You might like
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
基于Python解密仿射密码
2019/10/21 Python
python属于解释语言吗
2020/06/11 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
Ajax的工作原理
2015/12/04 面试题
英语演讲稿范文
2014/01/03 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
画展邀请函
2015/01/31 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Python装饰器的练习题
2021/11/23 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL