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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
js实现前端界面导航栏下拉列表
Aug 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
PHP容易忘记的知识点分享
2013/04/30 PHP
10款实用的PHP开源工具
2015/10/23 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
python网络编程实例简析
2014/09/26 Python
python实现连接mongodb的方法
2015/05/08 Python
Python实现带百分比的进度条
2016/06/28 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
tensorflow 查看梯度方式
2020/02/04 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python初步实现word2vec操作
2020/06/09 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
《地震中的父与子》教学反思
2014/04/10 职场文书
国庆横幅标语
2014/10/08 职场文书
新郎答谢词
2015/01/04 职场文书
争先创优个人总结
2015/03/04 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python