// Свойство присваивания
переменная В Flag = 0;
вар = Движение document.getElementById ( 'xuanfu');
вар disX, Disy; // элемент левый / '' радиуса
вар Movex, moveY;
вар L, T; // подвижный диапазон
вар StaRx, Старый;
вар starXEnd, starYEnd;
// начать прослушивание мобильного
motion.addEventListener ( 'touchstart', touchstartFun);
функция touchstartFun (Е) {
In Flag = 0;
e.preventDefault (); // если касание кнопки , чтобы остановить страницу прокрутки и масштабирования
// Получить элемент влево / верхнее расстояние до центра (clientX, clientY) из
disX e.touches = [0] .clientX - this.offsetLeft;
Disy e.touches = [0] .clientY - this.offsetTop;
/ / палец нажал экранные координаты
StaRx e.touches = [0] .clientX;
Старый e.touches = [0] .clientY;
motion.addEventListener ( 'touchEnd', touchendFun); // нажмите слушателем
}
// слушателя мобильный событие
motion.addEventListener ( 'TouchMove', функция (Е) {
motion.removeEventListener ( 'touchEnd', touchendFun); // Удалить Click слушателя событий
. В Flag = 1;
L = e.touches [0] .clientX - disX;
Т = E .touches [0] .clientY - Disy;
разность между текущим положением и при перемещении // начального положения
starXEnd e.touches = [0] .clientX - StaRx;
starYEnd e.touches = [0] .clientY - Старый;
IF (L <0) {
L = 0; // Х ограничивают объем сопротивления, экран не может быть вытащен
} иначе , если в (L> document.documentElement.clientWidth - this.offsetWidth) {
L = document.documentElement.clientWidth - The этого. offsetWidth;
}
IF (T <60) {// это координата у верхних и нижних краев 60
Т = 60; // Y ограничивают объем сопротивления, экран не может быть вытянуто
} иначе , если (Т> document.documentElement.clientHeight - this.offsetHeight-60) {
Document.documentElement.clientHeight = Т - this.offsetHeight - 60;
}
Movex = L + 'РХ';
moveY = Т + 'РХ';
this.style.left = Movex;
this.style.top = moveY;
$ ( ' Div-.xf.) скрывать ();
localStorage.setItem ( 'Movex ' Movex); // установить локальный кэш местоположения
localStorage.setItem (' moveY», moveY);
});
// прослушивать событие щелчка
motion.addEventListener ( 'touchend', touchendFun);
функция touchendFun (E) {
motion.addEventListener ( 'touchstart', функция (E) {// отменить перемещение (здесь Fu кнопка меню нажмите событие, отмененные события прослушивания removeEventListener)
e.preventDefault ();
document.getElementById ( 'div1') addEventListener ( 'touchEnd', функция (Е) = {в этих location.href "URL1";}) .;
. document.getElementById ( 'div2') addEventListener ( 'touchend', функция (е) {location.href = "URL2";});
. document.getElementById ( 'div3') addEventListener ( 'touchend', функция (е) {location.href = "url3";});
});
если (флаг == 0) {
//写菜单的逻辑
вар Num = $ ( '# xuanfu'). CSS ( 'левый'). зиЬзЬг (0, $ ( '# xuanfu'). CSS ( 'левый') .length-2);
если ( «. XF-ДИВ '$ () CSS (' дисплей ') ==' блок ') {
если (число <window.innerWidth / 2) {
. $ (' # div1' ) анимации ({слева» 10px», вверху: "10px"}, 300);
. $ ( '# div2') анимации ({слева: "10px"}, 300);
$ ( '# div3') анимации ({слева: '10px', вверху: "10px"}, 300).
} еще {
$ (» # Div1' ) анимации ({справа: "10px", вверху: "10px"}, 300);.
$ ( '# div2') анимировать ({право: "10px"}, 300).
$ ( '# div3') анимировать ({правый: '10px', верхний: "10px"}, 300).
}
SetTimeout (функция () {$ () скрыть () 'XF-дел.';.}, 300);
} еще {
если (число <window.innerWidth / 2) {
$ ( '# xuanfu') HTML (<р класс = "вир">快速问诊<класс = "юаней" стиль = "нижний:. 45px; "> 0 </a> </ p> '+
' <класс = р "XF-ДИВ" ID = "div1" стиль =" фон: линейно-градиент (90deg, RGBA (130,174,253,1), RGBA (90140239, 1)); "> 1 <a class="yuan"> 0 </a> </ р> '+
' <класс = р "XF-DIV" ID = "div2" стиль =" фон: линейный градиент-( 90deg, RGBA (176,147,252,1), RGBA (132,95,223,1)); "> 2 <a class="yuan"> 0 </a> </ р> '+
' <р класс = ID = стиль "div3" "XF-DIV" = "фон: линейный градиент-(90deg, RGBA (98,232,176,1), RGBA (67,211,151,1));"> 3 <а класс = "юаней" > 0 </a> </ р> ');
$ ( '# div1') анимации ({слева: "40px", внизу: "80px"}, 300).
. $ ( '# div2') анимации ({слева: "85px"}, 300);
$ ( '# div3') анимации ({слева: '40px', вверху: "80px"}, 300).
} еще {
$ ( '# xuanfu'). HTML (<р класс = "вир"> <a快速问诊class="yuan" style="bottom:45px;"> 0 </a> </ p> '+
' <класс = "XF-DIV" ID = "div1" стиль р = "фон: линейный градиент-(90deg, RGBA (130,174,253,1), RGBA (90,140,239,1));"> 1 <класс = "юань"> 0 </a> </ p> '+
' <класс = "XF-ДИВ" ID = "div2" стиль р = "фон: линейно-градиент (90deg, RGBA (176,147,252,1), RGBA ( 132,95,223,1)); "> 2 <a class="yuan"> 0 </a> </ р> '+
' <р класс = "XF-DIV" ID = "div3" стиль = "фон: линейный градиент-(90deg, RGBA (98,232,176,1), RGBA (67,211,151,1));"> 3 <a class="yuan"> 0 </a> </ р> ');
$ ( '# div1') анимировать ({право: "40px", внизу: "80px"}, 300).
$ ( '# div2') анимировать ({право: "85px"}, 300).
$ ( '# div3') анимировать ({правый: '40px', верхний: "80px"}, 300).
}
$ ( 'XF-дел.') Шоу ().
}
}
}
//从缓存中获取最后移动的位置并添加属性
вар localmoveX = localStorage.getItem ( 'Movex');
вар localmoveY = localStorage.getItem ( 'moveY');
если ( ''! = localmoveX && нуль = localmoveX) {
$ ( '# xuanfu'). CSS ( 'левый', localmoveX);
}
Если '(' {= localmoveY && нуль = localmoveY!)
(# Xuanfu ') CSS. ( 'Сверху', localmoveY) $';
}
-------- --------- HTML
<DIV>
<DIV ID = "xuanfu" класс = "xuanfu">
<р класс = "вир">悬浮球<класс =» юани «стиль =» нижний:
<р класс = "XF-DIV" ID = "div2" стиль = "фон: линейный градиент-(90deg, RGBA (176,147,252,1), RGBA (132,95,223,1));">图文</ р>
<р класс = "XF-DIV" ID = "div3" стиль = "фон: линейный градиент-(90deg, RGBA (98,232,176,1), RGBA (67,211,151,1));">视频</ р>
</ дел >
</ DIV>
--------- CSS ----------
.sup {
позицию: абсолютная;
верх: 50%;
слева: 50%;
преобразование: переводить (-50%, - 50%);
Z-индекс: 99999;
}
.Xuanfu {
положение: фиксированный;
Дно: 15%;
правое: 5%;
ширина: 70px;
высота: 70px;
Размер шрифта: 17px;
цвет: #fff;
начертание шрифта: жирный;
границы радиус: 50%;
/ * Цвет фона: # 5e4dfe; RGBA (0,0,0,0.5) * /
фон: RGBA (94,77,254,1);
коробка-тень: 0px 0px 27px 0px RGBA (16,0,169,0.66);
границы: нет;
Z-индекс: 99998;
выравнивания текста: центр;
высота строки: 25px;
Дисплей: нет;
}
.Xf-DIV {
позицию: абсолютная;
внизу: 10px;
право: 10px;
ширина: 50px;
высота: 50px;
Размер шрифта: 16px;
цвет: #fff;
начертание шрифта: жирный;
границы радиус: 50%;
фоновый цвет: RGBA (0,0,0,0.5);
границы: нет;
Z-индекс: 99997;
выравнивания текста: центр;
высота строки: 50px;
Дисплей: нет;
}
.Yuan {
обивка: .15em .4em;
границы радиус: 18px;
цвет фона: # F43530;
цвет: #FFFFFF;
высота строки: 1.2em;
выравнивания текста: центр;
Размер шрифта: 12px;
вертикально-Align: средний;
позиция: абсолютная;
внизу: 35px;
Дисплей: нет;
}
Подвесной использование кода, чтобы узнать от знания других людей, добавить меню подвески, если подходит, пожалуйста, также отметил.