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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP中的事务使用实例
2015/05/26 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP类的封装与继承详解
2015/09/29 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python实现最长公共子序列
2018/05/22 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Django model反向关联名称的方法
2018/12/15 Python
python处理excel绘制雷达图
2019/10/18 Python
django 简单实现登录验证给你
2019/11/06 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
运动会口号大全
2014/06/07 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
南京大屠杀观后感
2015/06/02 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Python绘制散乱的点构成的图的方法
2022/04/21 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang