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


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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
简单分析js中的this的原理
Aug 31 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
JS猜数字游戏实例讲解
Jun 30 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实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python验证码识别实例代码
2018/02/03 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python如何读取、写入CSV数据
2020/07/28 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
优秀高中生事迹材料
2014/02/11 职场文书
人事部岗位职责范本
2014/03/05 职场文书
生日主持词
2014/03/20 职场文书
民事上诉状范文
2015/05/22 职场文书
国庆放假通知怎么写
2015/07/30 职场文书