温馨提示：请在手机打开
html：
<div class="yaun" draggable="true">
<Span class="arrange">约吗</Span>
</div>
css：
{ margin: 0;padding: 0;}
html{ font-size: 62.5%; background: #000;}
.yaun{
position:absolute;
left: 50%;
bottom: 20px;
width: 70px;
height: 70px;
margin-left: -30px;
border-radius: 100%;
background: #f00;
-webkit-animation: yuananimil 1s ease ;
text-align: center;
line-height: 70px;
z-index: 99999;
}
.yaun .arrange{
font-size: 1.6em;
color: #fff;
position:relative;
-webkit-animation: listname 1.8s ease infinite;
}
@-webkit-keyframes yuananimil{
from{-webkit-transition: all; width: 0; height: 0;}
to{-webkit-transition: all; width: 70px; height: 70px;}
}
/
@keyframes listname{
from{-webkit-transition: all; opacity: 0; left: 0;}
to{-webkit-transition: all; opacity: 1; left: 30px;}
}*/
@-webkit-keyframes listname{
0{ -webkit-transform: rotate(0);}
12%{ -webkit-transform: rotate(30deg);}
24%{ -webkit-transform: rotate(-30deg);}
36%{ -webkit-transform: rotate(20deg);}
48%{ -webkit-transform: rotate(-20deg);}
60%{ -webkit-transform: rotate(15deg);}
72%{ -webkit-transform: rotate(-15deg);}
84%{ -webkit-transform: rotate(15deg);}
96%{ -webkit-transform: rotate(-15deg);}
100%{ -webkit-transform: rotate(0deg);}}
@-moz-keyframes listname{
0{ -moz-transform: rotate(0);}
12%{ -moz-transform: rotate(30deg);}
24%{ -moz-transform: rotate(-30deg);}
36%{ -moz-transform: rotate(20deg);}
48%{ -moz-transform: rotate(-20deg);}
60%{ -moz-transform: rotate(15deg);}
72%{ -moz-transform: rotate(-15deg);}
84%{ -moz-transform: rotate(15deg);}
96%{ -moz-transform: rotate(-15deg);}
100%{ -moz-transform: rotate(0deg);}}
$(document).ready(function(){
var startX, startY, endX, endY;
$(".yaun").on("touchstart", function(){
event.preventDefault();//取消事件的默认行为
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
});
$(".yaun").on("touchmove",function(){
event.preventDefault();
var touch = event.touches[0];
//endY = (startY - touch.pageY);
endX = touch.pageX;
endY = touch.pageY;
if(startX - endX>0){
$(this).css({
"left":startX-(startX - endX)
})
}
if(startX - endX<0){
$(this).css({
"left":startX-(startX - endX)
})
}
if(startY - endY>0){
$(this).css({
"top":startY-(startY - endY)
})
}
if(startY - endY<0){
$(this).css({
"top":startY-(startY - endY)
})
}
});
$(".yaun").on("touchend",function(){
event.preventDefault();
//alert(startX - endX)
if(startX - endX>0){
$(this).css({
"left":startX-(startX - endX)
})
}
if(startX - endX<0){
$(this).css({
"left":startX-(startX - endX)
})
}
if(startY - endY>0){
$(this).css({
"top":startY-(startY - endY)
})
}
if(startY - endY<0){
$(this).css({
"top":startY-(startY - endY)
})
}
});})