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 相关文章推荐
document.compatMode介绍
May 21 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php-fpm配置详解
2014/02/12 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
深入理解jQuery 事件处理
2016/06/14 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python并发编程之线程实例解析
2017/12/27 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
团委书记的竞聘演讲稿
2014/04/24 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
三年级学生评语大全
2014/12/26 职场文书
《静夜思》教学反思
2016/02/17 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书