图标线性回归斜着移动到指定的位置
程序员文章站
2022-04-19 19:07:48
图标斜着移动，看代码了
. 代码如下:
图...</div>
<div class="content">
<p>图标斜着移动，看代码了</p>
<p class="codetitle"><span onclick="doCopy('code74148')" style="CURSOR: pointer"><u>.</u></span> 代码如下:</p>
<p class="codebody" id="code74148"><br>
<!DOCTYPE html ><br>
<html><br>
<head><br>
<title>图标线性回归移动到指定的位置</title><br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br>
</head><br>
<body style="font-size: 13px;"><br>
<p><br>
<p style="margin: 30px 0 30px 0;"><br><br>
<p style="margin: 50px 0 0 500px;"><b id="b">B</b></p><br>
<p style="margin: 80px 0 0 300px;"><b id="d">D</b></p><br>
</p><br>
<p><br>
<button name="move">move</button><br>
<button name="reset">reset</button><br>
</p><br>
</p><br>
<!-- OK图标设置成隐藏浮动 --><br>
<p id="ok" style="display: none; position: absolute; width: 16px; font-color: white; background-color: red;">OK</p><br><br>
<script type="text/javascript" src="https://jt.875.cn/js/jquery.js"></script><br>
<script type="text/javascript"><br><br>
var pb = {left: $("#b").position().left + $("#b").width(), top: $("#b").position().top};//B点位置<br><br>
var pd = {left: $("#d").position().left + $("#d").width(), top: $("#d").position().top};//D点位置<br>
$("#ok").css({left: pd.left, top: pd.top});//初始将OK放在D点<br><br>
$("button[name=move]").click(function() {//点击move按钮开始从D点移动B点<br>
$("#ok").fadeIn().animate({<br>
left: pb.left,<br>
top: pb.top<br>
}, 1000,function(){//1秒内完成动画，可以设置动画速度,完了隐藏<br>
$("#ok").fadeOut()<br>
});<br><br>
});<br><br>
$("button[name=reset]").click(function() {//点击reset按钮回到初始状态<br>
$("#ok").hide().css({left: pd.left, top: pd.top});<br>
});<br>
</script><br>
</body><br>
</html></p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/659646.html">
正则表达式简介（1-3） </a>
</p>
<p>
下一篇： <a href="/article/659648.html">
明朝的海军未有败绩，明朝海军为何如此强大？ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1844853.html" target="_blank" title="图标线性回归斜着移动到指定的位置">
<h2>
图标线性回归斜着移动到指定的位置 </h2>
</a>
</li>
<li>
<a href="/article/848611.html" target="_blank" title="图标线性回归斜着移动到指定的位置_jquery">
<h2>
图标线性回归斜着移动到指定的位置_jquery </h2>
</a>
</li>
<li>
<a href="/article/805295.html" target="_blank" title="图标线性回归斜着移动到指定的位置_jquery">
<h2>
图标线性回归斜着移动到指定的位置_jquery </h2>
</a>
</li>
<li>
<a href="/article/659647.html" target="_blank" title="图标线性回归斜着移动到指定的位置">
<h2>
图标线性回归斜着移动到指定的位置 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>