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中实现标签切换效果的代码
Mar 01 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
js+css3实现炫酷时钟
Aug 18 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
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
函授大专自我鉴定
2013/11/01 职场文书
运动会解说词200字
2014/02/06 职场文书
求职自荐信的格式
2014/04/07 职场文书
对孩子的寄语
2014/04/09 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python