jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置


Posted in Javascript onMarch 21, 2010

此控件是基于Jquery开发的,要引用Jquery框架
控件代码

$.fn.myNudge = function() { 
var self = $(this); 
self.css({ position: "absolute" }); //让这个元素绝对定位 
var selfLeft = self.css("left"); 
var selfTop = self.css("top"); 
self.css({ left: selfLeft, top: selfTop }); //设置这个元素为原来的位置 
self.hover(function() { 
self.animate({ left: "+=50px" }, 1000); 
}, 
function() { 
self.animate({ left: "-=50px" }, 1000); 
} 
); 
}

使用方法
HTML代码
<span id="Span1" class="s">sadfsadfds</span><br /> 
JAVASCRIPT代码 
<script type="text/javascript"> 
$(function() { 
$("#Span1").myNudge(); 
}); 
</script>
Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
动态加载jQuery的方法
Jun 16 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
vue-hook-form使用详解
Apr 07 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
node.js中EJS 模板快速入门教程
May 08 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 #Javascript
js 居中漂浮广告
Mar 21 #Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 #Javascript
js 格式化时间日期函数小结
Mar 20 #Javascript
window.location.hash 属性使用说明
Mar 20 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP的中问验证码
2006/11/25 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
laravel model 两表联查示例
2019/10/24 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
JavaScript实现点击切换功能
2021/01/27 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python实现求特征选择的信息增益
2018/12/18 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python连接mysql有哪些方法
2020/06/24 Python
python中关于数据类型的学习笔记
2020/07/19 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
教师实习自我鉴定
2013/12/11 职场文书
校园广播稿500字
2014/02/04 职场文书
教师现实表现材料
2014/02/14 职场文书
自动一体化专业求职信
2014/03/15 职场文书
大学生活自我评价
2014/04/09 职场文书
2015大学生求职信范文
2015/03/20 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python