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 相关文章推荐
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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
php csv操作类代码
2009/12/14 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
对Django url的几种使用方式详解
2019/08/06 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python中元组的用法整理
2020/06/15 Python
一文读懂Python 枚举
2020/08/25 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
捐助感谢信
2015/01/22 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Python 数据可视化之Matplotlib详解
2021/11/02 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android