JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng)并且是橫屏狀態(tài)下

更新時(shí)間：2020年08月19日 08:58:43 作者：代碼之旅

這篇文章主要介紹了JS實(shí)現(xiàn)懸浮球只在一側(cè)滑動(dòng) 并且是橫屏狀態(tài)下,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

公司有一個(gè)新的需求是需要懸浮球在一側(cè)上下滑動(dòng) 其實(shí)是很簡(jiǎn)單的而且網(wǎng)上都有各種案例，但是偏偏是橫屏狀態(tài)下，而且不是手機(jī)橫屏是用css強(qiáng)制旋轉(zhuǎn)屏幕90度之后的橫屏，所以就會(huì)出現(xiàn)坐標(biāo)系的紊亂，然后我這個(gè)功能一開(kāi)始做成的效果就是觸摸上下滑動(dòng)的時(shí)候，懸浮球是左右走（目前的這個(gè)圖片的上下左右），當(dāng)時(shí)非常的苦惱，接下來(lái)貼上我的代碼，大家可以參考，有問(wèn)題可以評(píng)論指出，謝謝！我先把我的基本布局拿過(guò)來(lái)，用的js是flexible.js 寫(xiě)的移動(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í)寫(xiě)這個(gè)的時(shí)候是依賴(lài)于一個(gè)云項(xiàng)目中的SDK 自帶的樣式它的樣式就是這么強(qiáng)制橫屏的所以我當(dāng)時(shí)為了測(cè)試，就自己先寫(xiě)在了自己的樣式里面僅供參考如有更好的大家可以盡可能的提出！

#example {
 width: 100%;
 height: 100%;
 position: relative;
 /* 這是分割線(xiàn) 以下是為了屏幕旋轉(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;

這兩句按正常的豎屏的話(huà)應(yīng)該是

var bigbox_w = bigBox.offsetWidth；
var bigbox_h = bigBox.offsetHeight；
offsetWidth 顯示的是盒子正常的寬 （也就是你css里面寫(xiě)的寬）
offsetHeight 顯示的是盒子正常的高 （也就是你css里面寫(xiě)的高）

但是由于橫屏你的視覺(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)然了臨界值的話(huà) 比較好判斷這里就不多說(shuō)了；

 smallBox.style.top = moveX + 'px';
 smallBox.style.left = moveY + 'px';

這里需要注意的是小盒子的top值其實(shí)是你最后算出來(lái)的moveX 值；left值就是moveY 值；寫(xiě)了好久了自己的能力有限如果有更好的或者可以改進(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: