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

143 阅读 0 评论 95 点赞

我是靠谱客的博主着急月饼，最近开发中收集的这篇文章主要介绍图标线性回归斜着移动到指定的位置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

图标斜着移动，看代码了

复制代码代码如下:

 
<!DOCTYPE html > 
<html> 
<head> 
<title>图标线性回归移动到指定的位置</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head> 
<body style="font-size: 13px;"> 
<div> 
<div style="margin: 30px 0 30px 0;"> 

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

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

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

var pd = {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> 