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


Posted in Javascript onAugust 16, 2013

图标斜着移动,看代码了

<!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>
Javascript 相关文章推荐
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
jquery实现图片裁剪思路及实现
Aug 16 #Javascript
求数组最大最小值方法适用于任何数组
Aug 16 #Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 #Javascript
JavaScript版TAB选项卡效果实例
Aug 16 #Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 #Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 #Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python 变量初始化空列表的例子
2019/11/28 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
建筑设计专业求职自我评价
2014/03/02 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
班级标语大全
2014/06/21 职场文书
意向协议书
2015/01/27 职场文书
入党介绍人考察意见
2015/06/01 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
使用Java去实现超市会员管理系统
2022/03/18 Java/Android