欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-15 22:56:19
图标斜着移动,看代码了 . 代码如下: 图...</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/1844852.html"> windows配置pycharm和anaconda的教程 </a> </p> <p> 下一篇: <a href="/article/1844854.html"> linux高级编程 </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>