提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

图标线性回归斜着移动到指定的位置

指定 移动 位置 回归 图标 线性
2023-06-13 09:15:04 时间
图标斜着移动，看代码了
复制代码代码如下:

<!DOCTYPEhtml>
<html>
<head>
<title>图标线性回归移动到指定的位置</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
</head>
<bodystyle="font-size:13px;">
<div>
<divstyle="margin:30px030px0;">

<divstyle="margin:50px00500px;"><bid="b">B</b></div>
<divstyle="margin:80px00300px;"><bid="d">D</b></div>
</div>
<div>
<buttonname="move">move</button>
<buttonname="reset">reset</button>
</div>
</div>
<!--OK图标设置成隐藏浮动-->
<divid="ok"style="display:none;position:absolute;width:16px;font-color:white;background-color:red;">OK</div>

<scripttype="text/javascript"src="http://jt.875.cn/js/jquery.js"></script>
<scripttype="text/javascript">

varpb={left:$("#b").position().left+$("#b").width(),top:$("#b").position().top};//B点位置

varpd={left:$("#d").position().left+$("#d").width(),top:$("#d").position().top};//D点位置
$("#ok").css({left:pd.left,top:pd.top});//初始将OK放在D点

$("button[name=move]").click(function(){//点击move按钮开始从D点移动B点
$("#ok").fadeIn().animate({
left:pb.left,
top:pb.top
},1000,function(){//1秒内完成动画，可以设置动画速度,完了隐藏
$("#ok").fadeOut()
});

});

$("button[name=reset]").click(function(){//点击reset按钮回到初始状态
$("#ok").hide().css({left:pd.left,top:pd.top});
});
</script>
</body>
</html>

相关文章