JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng)并且是橫屏狀態(tài)下
公司有一個(gè)新的需求 是需要懸浮球在一側(cè)上下滑動(dòng) 其實(shí)是很簡(jiǎn)單的 而且網(wǎng)上都有各種案例，但是 偏偏是橫屏狀態(tài)下 ，而且不是手機(jī)橫屏 是用css強(qiáng)制旋轉(zhuǎn)屏幕90度之后的橫屏，所以就會(huì)出現(xiàn)坐標(biāo)系的紊亂，然后我這個(gè)功能一開始做成的效果就是觸摸上下滑動(dòng)的時(shí)候 ，懸浮球是左右走（目前的這個(gè)圖片的上下左右），當(dāng)時(shí)非常的苦惱，接下來(lái)貼上我的代碼，大家可以參考，有問(wèn)題可以評(píng)論指出，謝謝！我先把我的基本布局拿過(guò)來(lái)，用的js是flexible.js 寫的移動(dòng)端的布局；
因?yàn)榇a是有一陣子了 我也是從網(wǎng)上找的相關(guān)的正常懸浮球的移動(dòng)的案例 之后再研究的橫屏下的懸浮球移動(dòng)；如涉及侵權(quán)，請(qǐng)諒解 或者指出 我會(huì)標(biāo)明出處；感謝配合；
下面的是html
圖片那里大家可以自行更換
<body> <div id="example"> <!-- 側(cè)邊的懸浮球 --> <div class="sideDown"> <ul class="smallDown"> <img class="suspBall" src="./images/sideDownLogo.png" alt=""> <li class="comeOut"> <p class="Take_back"><img src="./images/putAway.png" alt=""></p> <p class="save_game"> <img src="./images/saveLogo.png" alt=""> <i>保存</i> </p> <p class="down_game"> <img src="./images/downLogo.png" alt=""> <i>下載</i> </p> </li> </ul> </div> </div> </body>
下面的是css 因?yàn)槲耶?dāng)時(shí)寫這個(gè)的時(shí)候是依賴于一個(gè)云項(xiàng)目中的SDK 自帶的樣式 它的樣式就是這么強(qiáng)制橫屏的 所以我當(dāng)時(shí)為了測(cè)試，就自己先寫在了自己的樣式里面 僅供參考 如有更好的 大家可以盡可能的提出！
#example {
width: 100%;
height: 100%;
position: relative;
/* 這是分割線 以下是為了屏幕旋轉(zhuǎn)成橫屏 僅供參考 */
width: 667px;
height: 375px;
left: -146px;
top: 146px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-moz-transform-origin: center center;
-webkit-transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center
}
/* 側(cè)邊的懸浮球 */
.sideDown {
width: 1rem;
height: 100%;
position: absolute;
z-index: 444;
right: 0;
display: block;
}
.sideDown ul {
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
position: absolute;
top: 20px;
right: 0;
opacity: 1;
}
.sideDown ul img.suspBall {
display: inline-block;
width: 1rem;
height: 1rem;
z-index: 333;
}
.sideDown li {
position: absolute;
z-index: 222;
right: 0.15rem;
width: 3.3rem;
height: 0.60rem;
background: rgba(255, 230, 0, 1);
border-radius: 0.35rem;
opacity: 0.9;
display: flex;
align-items: center;
}
.sideDown li p {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 0.5rem;
}
.sideDown li p img {
display: inline-block;
width: 0.29rem;
height: 0.29rem;
}
.sideDown li p:first-child {
width: 0.2rem;
height: 0.2rem;
margin-left: 0.16rem;
}
.sideDown li p:first-child img {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
}
.sideDown li p:first-child img {
display: inline-block;
width: 0.2rem;
height: 0.2rem;
}
.sideDown li p i {
display: inline-block;
font-size: 0.17rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
以下是重點(diǎn) js代碼
<script>
window.onload = function () {
var flag = 0; //標(biāo)記是拖曳還是點(diǎn)擊
var disX, disY;
var targetW = 0;//剛進(jìn)來(lái)的時(shí)候懸浮球左邊的寬度是正常的；
// 獲取元素
var bigBox = document.querySelector(".sideDown");
var sBox = document.querySelector(".smallDown");
var sBoxImg = document.querySelector(".suspBall");
// console.log('獲取元素', bigBox, sBox)
// 獲取大盒子的大小
var bigbox_w = bigBox.offsetHeight;
var bigbox_h = bigBox.offsetWidth;
// console.log('獲取大盒子的大小', bigbox_w, bigbox_h)
// 獲取小盒子的大小
var sbox_w = sBox.offsetHeight;
var sbox_h = sBox.offsetWidth ;
// console.log('獲取小盒子的大小', sbox_w, sbox_h)
// 獲取大盒子的間距
var bigBox_l = bigBox.offsetLeft;
var bigBox_t = bigBox.offsetTop ;
// console.log('獲取大盒子的間距', bigBox_l, bigBox_t)
// 小盒子鼠標(biāo)按下才觸發(fā)事件
sBoxImg.addEventListener('touchstart', function (ev) {
flag = 0;
ev = ev || window.event;
ev.preventDefault();//阻止觸摸時(shí)頁(yè)面的滾動(dòng)，縮放
// 獲取鼠標(biāo)在盒子中的位置
// 觸點(diǎn)位置減去小盒子的間距就是鼠標(biāo)在小盒子中的位置
disX = bigbox_w - ev.touches[0].pageX - sBox.offsetTop;
disY = ev.touches[0].pageY - bigBox_l;
console.log('獲取觸點(diǎn)位置', ev.touches[0].pageY, ev.touches[0].pageX)
console.log('小盒子的左和上間距', sBox.offsetLeft, sBox.offsetTop)
console.log('獲取鼠標(biāo)在盒子中的位置', disX, disY)
})
sBoxImg.addEventListener('touchmove', function (e) {
flag = 1;
e = e || window.event;
// 用這次獲取到的鼠標(biāo)的位置減去上次鼠標(biāo)在小盒子的位置就是小盒子的左和上間距
var moveX = bigbox_w - e.touches[0].pageX - disX;
var moveY = e.touches[0].pageY - disY;
// console.log('移動(dòng)的時(shí)候~~獲取觸點(diǎn)位置', e.touches[0].pageX, e.touches[0].pageY)
// console.log('獲取上次鼠標(biāo)在盒子中的位置', disX, disY)
// console.log('小盒子的左和上間距', moveX, moveY)
if (moveX < 0) {
moveX = 0;
}
if (moveY < 0) {
moveY = 0;
}
if (moveX > bigbox_w - sbox_w) {
moveX = bigbox_w - sbox_w;
}
if (moveY > bigbox_h - sbox_h) {
moveY = bigbox_h - sbox_h;
}
sBox.style.top = moveX + 'px';
sBox.style.left = moveY + 'px';
})
sBoxImg.addEventListener('touchend', function (e) {
// console.log('結(jié)束')
//判斷滑動(dòng)方向
if (flag === 0) {//點(diǎn)擊
// console.log('點(diǎn)擊了');
if (targetW == 0) {
console.log('收回去了', targetW)
$(".comeOut").animate({ width: '0.3rem', opacity: '0.5', }, 'slow', function () {
targetW = 1; //改變懸浮球左邊大小的時(shí)候 改變這個(gè)值 以便于后面的判斷；
})
}
if (targetW == 1) {
console.log('放出來(lái)了', targetW)
$(".comeOut").animate({ width: '3.3rem', opacity: '0.9', }, 'slow', function () {
targetW = 0;
})
}
}
});
$(".Take_back").click(function (event) {
console.log('點(diǎn)擊箭頭', targetW)
$(".comeOut").animate({ width: '0.3rem', opacity: '0.5', }, 'slow', function () {
targetW = 1; //改變懸浮球左邊大小的時(shí)候 改變這個(gè)值 以便于后面的判斷；
})
event.stopPropagation()
});
}
</script>
下面進(jìn)行詳細(xì)的解說(shuō)：
var bigbox_w = bigBox.offsetHeight; var bigbox_h = bigBox.offsetWidth;
這兩句 按正常的豎屏的話應(yīng)該是
var bigbox_w = bigBox.offsetWidth； var bigbox_h = bigBox.offsetHeight； offsetWidth 顯示的是盒子正常的寬 （也就是你css里面寫的寬） offsetHeight 顯示的是盒子正常的高 （也就是你css里面寫的高）
但是 由于橫屏 你的視覺(jué)中看到的就是一下左圖中 寬 高
這就是需要把 offsetWidth 和 offsetHeight 換一下 才是右圖中打印出來(lái)的寬高 才是視覺(jué)中的寬高；
同理 小盒子的大?。?6,17行）也需要換一下，盡管小盒子是一個(gè)正方形的 ；[/code]
這個(gè)是大盒子的間距； offsetLeft 和 offsetTop 也不是視覺(jué)中的left和top
var bigBox_l = bigBox.offsetLeft; var bigBox_t = bigBox.offsetTop ;
此時(shí)的大盒子的 offsetTop 為0 我就不在圖中標(biāo)出來(lái)了；大家應(yīng)該明白 就是圖中的右邊距離；
手機(jī)按下事件 這里就不多說(shuō)了 基本上就是按下（touchstart） 移動(dòng)（touchmove） 抬起 （touchend）
整體的邏輯 就是按下的時(shí)候 記錄一下鼠標(biāo)在小盒子里面的位置
以下就是關(guān)鍵，弄不好鼠標(biāo)的位置就記錄錯(cuò)了，我也是反反復(fù)復(fù)的想 才想明白；
我會(huì)用圖向大家解說(shuō)
disX = bigbox_w - ev.touches[0].pageX - smallBox.offsetTop; disY = ev.touches[0].pageY - bigBox_l;
鼠標(biāo)按下的值已經(jīng)記錄完畢 然后就是鼠標(biāo)移動(dòng)的時(shí)候 小球也要跟著動(dòng)
var moveX = bigbox_w - e.touches[0].pageX - disX; var moveY = e.touches[0].pageY - disY;
最后就是賦值
當(dāng)然了 臨界值的話 比較好判斷 這里就不多說(shuō)了；
smallBox.style.top = moveX + 'px'; smallBox.style.left = moveY + 'px';
這里需要注意的是 小盒子的top值 其實(shí)是你最后算出來(lái)的moveX 值；left值 就是moveY 值；寫了好久了 自己的能力有限 如果有更好的或者可以改進(jìn)的方式 隨時(shí)等待大家的評(píng)論來(lái)指點(diǎn)，謝謝大家；
到此這篇關(guān)于JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng) 并且是橫屏狀態(tài)下的文章就介紹到這了,更多相關(guān)js懸浮球滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了js圖片無(wú)縫滾動(dòng)插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件
這篇文章主要給大家介紹了關(guān)于如何使用JavaScript和XLSX.js將數(shù)據(jù)導(dǎo)出為Excel文件的相關(guān)資料,xlsx.js基于JavaScript的Excel文件讀寫庫(kù) 如果你需要在瀏覽器端處理Excel文件,那么xlsx.js可能是一個(gè)不錯(cuò)的選擇,需要的朋友可以參考下2024-05-05
layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
今天小編就為大家分享一篇解決LayUI表單獲取不到data的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript使用Range調(diào)色及透明度實(shí)例
本文給大家分享的是使用range做的一個(gè)簡(jiǎn)單的手動(dòng)調(diào)色并可以得到RGB值的小工具，非常的實(shí)用，有需要的小伙伴可以參考下2016-09-09
JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊復(fù)制鏈接的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊復(fù)制鏈接的方法,提供了2種簡(jiǎn)單的復(fù)制鏈接操作方法供大家選擇使用,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JS兼容所有瀏覽器的DOMContentLoaded事件的相關(guān)資料，標(biāo)準(zhǔn)瀏覽器中，使用DOMContentLoaded事件即可實(shí)現(xiàn)我們的要求，注冊(cè)事件處理函數(shù)也極為簡(jiǎn)單，感興趣的朋友一起學(xué)習(xí)吧2018-01-01
JavaScript實(shí)現(xiàn)樹的遍歷算法示例【廣度優(yōu)先與深度優(yōu)先】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)樹的遍歷算法,結(jié)合實(shí)例形式分析了javascript針對(duì)樹結(jié)構(gòu)的廣度優(yōu)先遍歷與深度優(yōu)先遍歷實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
本文主要介紹了three.js中物體的燈光與陰影設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07