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

图标斜着移动，看代码了


代码如下:

<!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>

赞 (0)

相关推荐

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

    图标斜着移动,看代码了 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>图标线性回归移动到指定的位置</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body style="font-size:

  • 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

    原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面出现空白的情况. 解决办法: 滚动之前,先设-webit-overflow-scrolling的属性值为auto,然后页面滚动完了,再设为touch即可. 实例: $("#id").css('-webkit-overflow-scrolling','auto'); $(

  • JavaScript获取指定元素位置的方法

    本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

  • JavaScript控制网页平滑滚动到指定元素位置的方法

    本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu

  • JS控制div跳转到指定的位置的几种解决方案总结

    JS控制div跳转到指定的位置的几种解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: <div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">d

  • C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法.分享给大家供大家参考,具体如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中几个字符 this.richTextBox1.SelectionLength = 2; //清空剪切板,防止里面之前有内容 Clipboard.Clear(); //给剪切板设置图片对象

  • webpack打包并将文件加载到指定的位置方法

    使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这 同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了. 基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包, 并且按照我们自己设定的存放路径进行存放) 首先在webpack.config.js文件中 entry入口函数出表示出哪些是需要单独打包成一个js包的: entry: { main: path.resolve(__dirname,'src/index.js'),

  • pip指定python位置安装软件包的方法

    由于电脑上安装了多个版本的pip,以及不同的pip对应不同的python,因此有时候使用pip install安装某个包时,可能会没有安装在想要的位置. 具体而言,在我电脑上,运行pip --version时,输出如下 pip 9.0.1 from /opt/anaconda3/lib/python3.6/site-packages (python 3.6) 运行sudo pip --version时,输出如下 pip 18.0 from /usr/local/lib/python3.5/dis

  • Android ListView滚动到指定的位置

    本文介绍的关于ListView移动到指定位置有两种方法,下面话不多说,直接来看示例代码: listview.setSelection(position); listview.smoothScrollToPosition(position); 第一种方法没有滚动效果,直接跳到指定位置,第二种方法是有滚动效果的. 但是,在是用的时候,你会发现第二种方法没有效果,甚至都没有移动,其实这个问题很好解决,只要在新线程里是用就可以了 listview.post(new Runnable() { @Overr

  • 易语言更改指定窗口位置和大小的方法

    易语言更改指定窗口位置和大小的方法

    移动方法 英文命令:move 操作系统支持:Windows    所属对象:窗口 改变窗口或窗口组件的位置或尺寸. 语法:  无返回值  窗口组件．移动 (［左边］,［顶边］,［宽度］,［高度］) 例程 说明 通过"移动"命令更改指定窗口的位置和大小.本方法适用于所有组件. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

随机推荐