The icon moves diagonally and looks at the code.
<! DOCTYPE HTML >
<title> icon Linear regression moved to the specified position </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<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 icon is set to hide floating-->
<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 Point Position
var PD = {left: $ (' #d '). Position (). Left + $ ("#d"). Width (), Top: $ ("#d"). Position (). top};//d Point Position
$ ("#ok"). CSS ({left:pd.left, top:pd.top});//initial set OK at D Point
$ ("Button[name=move]"). Click (function () {//Click the Move button to start moving point B from D Point
$ ("#ok"). FadeIn (). Animate ({
Left:pb.left,
Top:pb.top
1000,function () {//1 seconds to complete the animation, you can set the animation speed, finished hiding
$ ("#ok"). Fadeout ()
});
});
$ ("Button[name=reset]"). Click (function () {//Click the Reset button to return to the original state
$ ("#ok"). Hide (). css ({left:pd.left, top:pd.top});
});
</script>
</body>
