JS實(shí)現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實(shí)例代碼
測試瀏覽器為谷歌瀏覽器(谷歌toggle device toolbar)
var startx, starty, endx, endy, moveX, moveY, seatX, seatY;
var clickState = false;
//獲取輸入框dom元素
var text = document.forms[“form”];
//設(shè)置樣式
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;
}
//計(jì)算位置
function setPosition(obj) {
if (obj == ‘left') {
seatX = text.offsetLeft - 37; //橫坐標(biāo)
} else {
seatX = text.offsetLeft + text.offsetWidth; //橫坐標(biāo)
}
seatY = (text.offsetTop + text.offsetHeight) / 2; //縱坐標(biāo)
}
//創(chuàng)建DIV
function createDiv(obj) {
//首先創(chuàng)建div
var descDiv = document.createElement(‘div');
document.body.appendChild(descDiv);
//給div設(shè)置樣式,比如大小、位置
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”);
//設(shè)置 img 屬性,如 id
img.setAttribute(“id”, “newImg”);
//設(shè)置 img 圖片地址
img.src = “/Themes/TheThemeMachine/Images/” + obj + “.png”;
div.appendChild(img);
}
//刪除DIV
function removeDiv(obj) {
var el = document.getElementById(obj);
el.parentNode.removeChild(el);
}
//移動(dòng)DIV
function moveDiv(obj, movex) {
if (Math.abs(movex) < 37) {
var div = document.getElementById(obj);
setPosition(obj);
seatX = seatX + movex;
setCss(div);
}
}
//根據(jù)位移改變DIV的位置
function reductionDiv(obj) {
var div = document.getElementById(obj);
setPosition(obj);
setCss(div);
}
//計(jì)算移動(dòng)坐標(biāo)
function calculationMoveCoordinate() {
moveX = endx - startx;
moveY = Math.abs(endy - starty);
if (moveX > 0)
moveDiv(“l(fā)eft”, 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端鼠標(biāo)按下
function click() {
clickState = true;
startx = event.clientX;
starty = event.clientY;
}
//PC端鼠標(biāo)移動(dòng)
function pull() {
if (1 == event.which) //判斷左鍵是否按下
{
endx = event.clientX;
endy = event.clientY;
calculationMoveCoordinate();
}
}
//PC端和移動(dòng)端位移結(jié)束
function stopClick() {
if (Math.abs(moveX) > 37 && moveY < 20) {
if (moveX < 0) {
history.Go(1);
} else {
history.go(-1);
}
} else {
reductionDiv(“l(fā)eft”);
reductionDiv(“right”);
}
}
////移動(dòng)端注冊(cè)事件
document.addEventListener(‘touchmove', function (event) {
event.preventDefault();
}, false);
//touchstart事件
function touchSatrtFunc(evt) {
//evt.preventDefault(); //阻止觸摸時(shí)瀏覽器的縮放、滾動(dòng)條滾動(dòng)等
var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn)
startx = Number(touch.pageX); //頁面觸點(diǎn)X坐標(biāo)
starty = Number(touch.pageY); //頁面觸點(diǎn)Y坐標(biāo)
}
//touchmove事件,這個(gè)事件無法獲取坐標(biāo)
function touchMoveFunc(evt) {
//evt.preventDefault(); //阻止觸摸時(shí)瀏覽器的縮放、滾動(dòng)條滾動(dòng)等
var touch = evt.touches[0]; //獲取第一個(gè)觸點(diǎn)
endx = Number(touch.pageX); //頁面觸點(diǎn)X坐標(biāo)
endy = Number(touch.pageY); //頁面觸點(diǎn)Y坐標(biāo)
calculationMoveCoordinate();
}
//touchend事件
function touchEndFunc(evt) {
//evt.preventDefault(); //阻止觸摸時(shí)瀏覽器的縮放、滾動(dòng)條滾動(dòng)等
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實(shí)現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
ES6 Symbol在對(duì)象中的作用實(shí)例分析
這篇文章主要介紹了ES6 Symbol在對(duì)象中的作用,結(jié)合實(shí)例形式分析了ES6 Symbol在對(duì)象中聲明、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06
超級(jí)簡易的JS計(jì)算器實(shí)例講解(實(shí)現(xiàn)加減乘除)
下面小編就為大家?guī)硪黄?jí)簡易的JS計(jì)算器實(shí)例講解(實(shí)現(xiàn)加減乘除)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
使用JSX 建立組件 Parser(解析器)開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser(解析器)開發(fā)的示例(前端組件化)本文重點(diǎn)講述我們?nèi)绾螐?開始搭建一個(gè)組件系統(tǒng),基于標(biāo)記語言的Parser的一種風(fēng)格2021-04-04
微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序之幾種常見的彈框提示信息實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
常用的js驗(yàn)證和數(shù)據(jù)處理總結(jié)
遇到需要對(duì)數(shù)據(jù)及表單驗(yàn)證的,我相信大家都像我一樣,喜歡在網(wǎng)上找相關(guān)的方法,因?yàn)樽约簩懙脑挘潜容^耗時(shí)的。今天就給大家分享一下,自己在工作中總結(jié)的一些常用的js。2016-08-08
JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制(deep clone)的實(shí)現(xiàn)方法,涉及到j(luò)s深度復(fù)制相關(guān)知識(shí),本文介紹的非常詳細(xì),特此分享腳本之家平臺(tái)供大家參考2016-02-02
Add Formatted Text to a Word Document
Add Formatted Text to a Word Document...2007-06-06
Bun運(yùn)行時(shí)是新一代高性能JavaScript/TypeScript運(yùn)行時(shí)
Bun由Jarred Sumner創(chuàng)建,是一款新興的JavaScript和TypeScript運(yùn)行時(shí),旨在比Node.js和Deno提供更高性能和快速啟動(dòng),Bun使用Zig語言編寫,內(nèi)置包管理并支持Node.js大部分API,適用于高并發(fā)API服務(wù)和快速構(gòu)建工具2024-11-11

