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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
JS实现鼠标移动拖尾
Dec 27 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
第七节--类的静态成员
2006/11/16 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python实现超简单端口转发的方法
2015/03/13 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python数据库小程序源代码
2019/09/15 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
部队万能检讨书
2014/02/20 职场文书
税务会计岗位职责
2015/04/02 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
紧急迫降观后感
2015/06/15 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python