当前位置:主页 > jquery教程 > 图标线性回归斜着移动到指定的位置

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

发布:2020-02-18 18:39:31 140


我们帮大家精选了jQuery相关的编程文章,网友郜建华根据主题投稿了本篇教程内容,涉及到图标、线性回归、指定位置、图标线性回归斜着移动到指定的位置相关内容,已被804网友关注,相关难点技巧可以阅读下方的电子资料。

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

图标斜着移动,看代码了
 

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

<div ><b id="b">B</b></div>
<div ><b id="d">D</b></div>
</div>
<div>
<button name="move">move</button>
<button name="reset">reset</button>
</div>
</div>
<!-- OK图标设置成隐藏浮动 -->
<div id="ok" >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>

相关文章

  • Java ArrayList实现删除指定位置的元素

    发布:2023-03-03

    目标:list中有0到39共40个元素,删除其中索引是10、20、30的元素。本文为大家整理了三个不同的方法,感兴趣的小伙伴可以跟随小编一起学习一下


  • python实现机器学习多元线性回归总结

    发布:2019-06-08

    这篇文章主要为大家详细介绍了python实现机器学习之多元线性回归,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • bootstrap中添加额外的图标的方法

    发布:2020-01-31

    可以针对校验状态为输入框添加额外的图标。接下来通过本文给大家分享bootstrap中添加额外的图标实例代码,需要的的朋友参考下吧


  • PyTorch线性回归和逻辑回归的相关实例知识点

    发布:2019-11-02

    这篇文章主要介绍了PyTorch线性回归和逻辑回归实战示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Android涨姿势知识点之你没用过的BadgeDrawable

    发布:2023-03-05

    现在Android中有许多的应用仿苹果的在应用图标上显示小红点,下面这篇文章主要给大家介绍了关于Android涨姿势知识点之你没用过的BadgeDrawable的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下


  • Java操作word文档替换文字并指定位置插入图片方法

    发布:2018-12-01

    在本篇文章里我们给大家总结了Java操作word文档替换文字并指定位置插入图片方法以及相关实例代码,以后需要的朋友们学习下。


  • Python线性回归实战分析

    Python线性回归实战分析

    发布:2022-09-23

    给网友朋友们带来一篇关于Python 线性的教程,这篇文章主要介绍了Python线性回归实战分析以及代码讲解,对此有兴趣的朋友学习下吧。


  • jQuery实现拖拽图标到回收站并删除功能的实例讲解

    发布:2020-05-21

    这篇文章主要介绍了基于jQuery实现拖拽图标到回收站并删除功能,实现非常简单,我们直接可以利用jQuery内部封装的拖拽接口即可简单实现在网页上拖拽任意元素的功能,感兴趣的小伙伴们可以


网友讨论