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


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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
vue实现标签云效果的示例
Nov 09 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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中session使用示例
2014/03/29 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
JavaScript面象对象设计
2008/04/28 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
js获取url传值的方法
2015/12/18 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
python中关于日期时间处理的问答集锦
2013/03/08 Python
python去掉字符串中重复字符的方法
2014/02/27 Python
python 远程统计文件代码分享
2015/05/14 Python
python实现12306火车票查询器
2017/04/20 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
企业统计员岗位职责
2013/12/13 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
2019年入党思想汇报
2019/03/25 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL