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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
javascript使用call调用微信API
Dec 15 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js实现div在页面拖动效果
May 04 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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中慎用双等于(==)的详解
2013/06/06 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
php实现映射操作实例详解
2019/10/02 PHP
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python 美化输出信息的实例
2018/10/15 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python求凸包及多边形面积教程
2020/04/12 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
安全生产知识竞赛活动总结
2014/07/07 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
出纳岗位职责
2015/01/31 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL