//抖动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
100px;
height:200px;
background:red;
position:absolute;
top:50px;
left:300px;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>
<script>
var div=document.getElementById("div");
div.onclick=function(){
var that=this;
var arr=[];
for(var i=10;i>=0;i-=2){
arr.push(i,-i)
}
var t=null;
var index=0;
clearInterval(t)
t=setInterval(function(){
index++
that.style.left=that.offsetLeft+arr[index]+"px";
if(index==arr.length-1){
clearInterval(t)
that.style.left="300px"
}
最近的交互案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
330px;
height:330px;
background:#0ff;
margin:100px auto;
position:relative;
}
ul>li{
150px;
height:150px;
/*border:red 1px solid;*/
position:absolute;
}
ul>li:nth-of-type(1){
top:10px;
left:10px;
background:red
}
ul>li:nth-of-type(2){
top:10px;
left:170px;
background:blue
}ul>li:nth-of-type(3){
top:170px;
left:10px;
background:green;
}ul>li:nth-of-type(4){
top:170px;
left:170px;
background:pink
}
</style>
</head>
<body>
<ul id="list">
<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
<li id="d"></li>
</ul>
</body>
</html>
<script>
var list=document.getElementById("list");
var lis=document.getElementsByTagName("li");
var zindex=0;
function deag(obj){
obj.onmousedown=function(ev){
var ev=ev||window.event;
var that=this;
if(ev.button==0){
this.yuan={
l:this.offsetLeft,
t:this.offsetTop
}
this.x=ev.clientX-this.yuan.l;
this.y=ev.clientY-this.yuan.t;
this.style.zIndex=++zindex;
this.arr=[];
document.onmousemove=function(ev){
var ev=ev||window.event;
that.style.left=ev.clientX-that.x+"px";
that.arr=[]
that.style.top=ev.clientY-that.y+"px";
for(var i=0;i<lis.length;i++){
if(that==lis[i]){
continue;
}
if(peng(that,lis[i])){
lis[i].style.background="orange";
that.arr.push(lis[i])
}
}
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
for(var j=0;j<lis.length;j++){
lis[j].style.background="";
}
if(that.arr&&that.arr.length){
var ojb={};
for(var i=0;i<that.arr.length;i++){
if(!ojb.ele){
var ss=Math.sqrt(Math.pow((that.offsetLeft-that.arr[i].offsetLeft),2)+Math.pow((that.offsetTop-that.arr[i].offsetTop),2));
ojb.dis=ss;
console.log(ss)
ojb.ele=that.arr[i];
}
else{
var se=Math.sqrt(Math.pow((that.offsetLeft-that.arr[i].offsetLeft),2)+Math.pow((that.offsetTop-that.arr[i].offsetTop),2));
if(ojb.dis>se){
ojb.dis=se;
ojb.ele=that.arr[i];
}
}
}
var oob={
ll:null,
tt:null
}
var arra={
le:ojb.ele.offsetLeft,
to:ojb.ele.offsetTop
}
oob={
ll:that.yuan.l,
tt:that.yuan.t
}
that.yuan={
l:arra.le,
t:arra.to
}
arra={
le:oob.ll,
to:oob.tt
}
that.style.left=that.yuan.l+"px";
that.style.top=that.yuan.t+"px";
ojb.ele.style.left=arra.le+"px";
ojb.ele.style.top=arra.to+"px";
}
that.style.left=that.yuan.l+"px";
that.style.top=that.yuan.t+"px";
}
}
}
}
for(var i=0;i<lis.length;i++){
deag(lis[i])
}
function peng(a,b){
if(a.offsetLeft+a.offsetWidth<b.offsetLeft||a.offsetTop+a.offsetHeight<b.offsetTop||a.offsetLeft>b.offsetLeft+b.offsetWidth||a.offsetTop>b.offsetTop+b.offsetHeight){
return false;
}
else{
return true;
}
}
</script>