$().hover(function(){
startAni()
},
function(){
stopAni()
})
/*data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--{width:100,height:100,left:100,top:100}
callback--回调函数 可调用自己 实现异步动画效果
*/
//主函数
function move(dom,json,callback){
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(dom.timer)clearInterval(dom.timer)
var i=0
var start=0
//在对象中增加timer 便于控制他停止
dom.timer=setInterval(function(){
i++
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr)
if(i==1)start=cur
//拿到该属性的目标值
var target=json[attr]
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10
console.log(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Math.abs(cur-target)>1){
dom.style[attr]=cur+speed+"px"
}else{
//达到目标值了就停止或者其他情况也停止
clearInterval(dom.timer)
//等停止了动画再回调函数进行另外的操作
if(callback)callback.call(dom)
}
}
},45)
}
//配套函数
function getStyle(dom,attr){
var value=""
if(window.getComputedStyle){
value=window.getComputedStyle(dom,false)[attr]
}else{
value=dom.currentStyle[attr]
}
value=parseInt(value)
return value || 0//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
}
function $(id){
//return document.getElementById(id)
return document.querySelector("#"+id)
}
<div style="width:200pxheight:200pxbackground:Redposition:absoluteleft:10pxtop:10px" id="div1">div1</div><br><br>
<div style="width:200pxheight:200pxbackground:greenposition:absoluteleft:500pxtop:300px" id="div2">div2</div>
<br><BR><br><BR><br><BR><br><BR><br><BR><br><BR><br><BR><br><BR><br><BR><br><BR><br><BR>
<input name="tt" type="button" id="tt" value="交换位置" onclick="jiao()">
<script>
function getPos(obj){
var top=0,left=0
if(obj){
while(obj.offsetParent){
top += obj.offsetTop
left += obj.offsetLeft
obj = obj.offsetParent
}
}
return[top,left]
}
var flag
function jiao(){
clearTimeout(flag)
var obj1=document.getElementById("div1")
var obj2=document.getElementById("div2")
var a=getPos(obj1)
var b=getPos(obj2)
var t=5
var l=9
var Tflag=false
var Lflag=false
function move(){
if(a[0]<=b[0]){
var c=getPos(obj1)[0]-b[0]<t?t:getPos(obj1)[0]-b[0]
var d=getPos(obj2)[0]-a[0]>t?t:getPos(obj2)[0]-a[0]
if(getPos(obj1)[0]<b[0]){obj1.style.top=getPos(obj1)[0]+c}
if(getPos(obj2)[0]>a[0]){obj2.style.top=getPos(obj2)[0]-d}
}else{
var c=getPos(obj1)[0]-b[0]>t?t:getPos(obj1)[0]-b[0]
var d=getPos(obj2)[0]-a[0]<t?t:getPos(obj2)[0]-a[0]
if(getPos(obj1)[0]>b[0]){obj1.style.top=getPos(obj1)[0]-c}
if(getPos(obj2)[0]<a[0]){obj2.style.top=getPos(obj2)[0]+d}
}
if(getPos(obj1)[0]==b[0]&&getPos(obj2)[0]==a[0]){
Tflag=true
}
if(a[1]<=b[1]){
var c=getPos(obj1)[1]-b[1]<l?l:getPos(obj1)[1]-b[1]
var d=getPos(obj2)[1]-a[1]>l?l:getPos(obj2)[1]-a[1]
if(getPos(obj1)[1]<b[1]){obj1.style.left=getPos(obj1)[1]+c}
if(getPos(obj2)[1]>a[1]){obj2.style.left=getPos(obj2)[1]-d}
}else{
var c=getPos(obj1)[1]-b[1]>l?l:getPos(obj1)[1]-b[1]
var d=getPos(obj2)[1]-a[1]<l?l:getPos(obj2)[1]-a[1]
if(getPos(obj1)[1]>b[1]){obj1.style.left=getPos(obj1)[1]-c}
if(getPos(obj2)[1]<a[1]){obj2.style.left=getPos(obj2)[1]+d}
}
if(getPos(obj1)[1]==b[1]&&getPos(obj2)[1]==a[1]){
Lflag=true
}
if(!(Tflag&&Lflag)){
flag=setTimeout(move,30)
}
}
move()
}
</script>
花了一两个小时给你编写了一个，自己可以调整里面的参数，由于时间问题，没有仔细的测试！
