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 Tab 导航插件 (23个)
Jun 11 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
德生PL330测评
2021/03/02 无线电
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
销售辞职报告范文
2014/01/12 职场文书
消防志愿者活动方案
2014/08/23 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python