jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)效果
模擬手機(jī)端懸浮按鈕功能,自動(dòng)吸附兩邊,并且不能超過活動(dòng)區(qū)域,上下超過自動(dòng)吸附上或下
因?yàn)槭且苿?dòng)端端事件,需要調(diào)試到移動(dòng)端才可以看效果
以下是代碼
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> ? ? <title>Document</title> ? ? <style> ? ? ? ? .service_s { ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top: 0; ? ? ? ? ? ? left: 0; ? ? ? ? ? ? right: 0; ? ? ? ? ? ? bottom: 0; ? ? ? ? ? ? z-index: 1; ? ? ? ? ? ? display: none; ? ? ? ? } ? ? ? ? * { ? ? ? ? ? ? padding: 0; ? ? ? ? ? ? margin: 0; ? ? ? ? } ? ? ? ? .content { ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top: 10%; ? ? ? ? ? ? right: 3%; ? ? ? ? ? ? left: 3%; ? ? ? ? ? ? bottom: 10%; ? ? ? ? ? ? border: 1px solid #cccc77; ? ? ? ? ? ? background: #cccc77; ? ? ? ? ? ? display: flex; ? ? ? ? ? ? align-items: center; ? ? ? ? ? ? color: #fff; ? ? ? ? ? ? font-weight: 600; ? ? ? ? ? ? justify-content: center; ? ? ? ? } ? ? ? ? .service { ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top: 60%; ? ? ? ? ? ? right: 3%; ? ? ? ? ? ? height: 40px; ? ? ? ? ? ? width: 40px; ? ? ? ? ? ? background: #0baefd; ? ? ? ? ? ? z-index:9 ? ? ? ? } ? ? </style> </head> <body> ?? ?<div class="content">活動(dòng)區(qū)域</div> ?? ?<div class="service"> ? ? <!-- ? ?<div class="service_s"></div>--> ?<!-- ? ? ? ?遮罩層--> </div> <script> ? ? /** ? ? ?* ?nx ?ng 移動(dòng)坐標(biāo) ? ? ?* ? wxX wxY ?初始坐標(biāo) ? ? ?* ? ? ?isDown 阻止事件重復(fù)觸發(fā) ? ? ?* **/ ? ? var nx, ny, wxX, wxY, isDown = false; ?//X Y坐標(biāo) ? ? // H5頁(yè)面 ? ? $('.service').bind("touchstart", function (e) { ? ? //點(diǎn)擊觸發(fā) ? ? ? ? e.preventDefault(); ? ? ? ? $(this).css("transform", 'translate(0)') ? ? ? ? var touch = event.targetTouches[0]; ? ? ? ? wxX = touch.clientX; ? ? ? ? wxY = touch.clientY; ? ? ? ? // $('.service_s').show() ?//是否需要一個(gè)遮罩層 ? ? ? ? isDown = true; ? ? ? ? $(document).bind("touchmove", function (ev) { ? ? ? ? //滑動(dòng)觸發(fā) ? ? ? ? ? ? e.preventDefault(); ? ? ? ? ? ? if (!isDown) return ? ? ? ? ? ? var touch = event.targetTouches[0]; ? ? ? ? ? ? ny = touch.clientY - $('.service').height() / 2 ? ? ? ? ? ? nx = touch.clientX - $('.service').width() / 2 ? ? ? ? ? ? $('.service').css('top', '' + ny / ($(window).height() / 100) + '%') ? ? ? ? ? ? $('.service').css('left', '' + nx / ($(window).width() / 100) + '%') ? ? ? ? }) ? ? }).bind("touchend", function (e) { ? ? ?? ?//移開觸發(fā) ? ? ? ? var touch = event.changedTouches[0]; ? ? ? ? //判斷跟初始坐標(biāo)是否一致,一致則大概率為點(diǎn)擊事件 ? ? ? ? if (wxX === touch.clientX && wxY === touch.clientY) { ? ? ? ? ? ? alert('點(diǎn)擊了') ? ? ? ? } else { ? ? ? ? //判斷所在位置,自動(dòng)吸附左右,如果超過上下活動(dòng)區(qū)域范圍則在左右的基礎(chǔ)上加上吸附上下 ? ? ? ? ? ? if (nx < $(window).width() / 2) { ? ? ? ? ? ? ? ? if ($(window).height() * 0.9 - $('.service').height() < ny) { ? ? ? ? ? ? ? ? ? ? $('.service').css({"top": "90%", "transform": `translateY(${-($(this).height())}px)`}) ? ? ? ? ? ? ? ? } else if ($(window).height() * 0.1 > ny) { ? ? ? ? ? ? ? ? ? ? $('.service').css({"top": "10%"}) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? $('.service').css({"left": "3%",}) ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? if ($(window).height() * 0.9 - $('.service').height() < ny) { ? ? ? ? ? ? ? ? ? ? $('.service').css({ ? ? ? ? ? ? ? ? ? ? ? ? "top": "90%", ? ? ? ? ? ? ? ? ? ? ? ? "left": "97%", ? ? ? ? ? ? ? ? ? ? ? ? "transform": `translate(${-($(this).height())}px,${-($(this).width())}px)` ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? } else if ($(window).height() * 0.1 > ny) { ? ? ? ? ? ? ? ? ? ? $('.service').css({"top": "10%", "left": "97%", "transform": `translateX(${-($(this).width())}px)`}) ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? $('.service').css({"left": "97%", "transform": `translateX(${-($(this).width())}px)`}) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? isDown = false; ??? ??? ?//$('.service_s').hide() ? ? }) </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery實(shí)現(xiàn)表格行拖動(dòng)排序
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
- 針對(duì)后臺(tái)列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jQuery仿360導(dǎo)航頁(yè)圖標(biāo)拖動(dòng)排序效果代碼分享
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery對(duì)元素拖動(dòng)排序示例
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jQuery實(shí)現(xiàn)的簡(jiǎn)單對(duì)話框拖動(dòng)功能示例
- jquery+css實(shí)現(xiàn)移動(dòng)端元素拖動(dòng)排序
相關(guān)文章
基于jquery的一行代碼輕松實(shí)現(xiàn)拖動(dòng)效果
寫JS實(shí)現(xiàn)拖動(dòng)需要一大堆不便維護(hù)的代碼,實(shí)屬麻煩,Google了大半天,發(fā)現(xiàn)了一個(gè)優(yōu)秀的Jquery插件EasyDrag,只需要一行代碼便可輕松在主流瀏覽器上。2010-12-12Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
Jquery操作下拉框(DropDownList)想必大家都有所接觸吧,下面與大家分享下對(duì)DropDownList進(jìn)行取值賦值的實(shí)現(xiàn)代碼2013-08-08jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊圖標(biāo)div循環(huán)放大縮小功能,這是一個(gè)很常見很基礎(chǔ)的功能,下面小編通過實(shí)例代碼給大家介紹,需要的朋友可以參考下2018-09-09jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
主要功能是動(dòng)態(tài)增減輸入框,而且支持對(duì)各個(gè)輸入框的檢測(cè),每個(gè)輸入框在輸入內(nèi)容后,對(duì)其進(jìn)行錯(cuò)誤提示2013-07-07easyui簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了easyui簡(jiǎn)介,詳細(xì)的介紹了什么是easyui和easyui的用法,有興趣的可以了解一下2017-07-07jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能,需要的朋友可以參考下2017-10-10