jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置_jquery

此控件是基于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>

时间: 2024-10-04 06:57:18

jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置_jquery的相关文章

浅析jquery某一元素重复绑定的问题

 本篇文章主要是对jquery某一元素重复绑定的问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道).几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因.原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错.如代码:     代码如下: $('.test').bind('click',function(){       

jQuery操作DOM元素

原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 关于节点的查找,是利用选择器完成的. 在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: <!DOCTYPE html> <html> <head>

jQuery对html元素的取值与赋值实例详解_jquery

本文实例讲述了jQuery对html元素的取值与赋值方法.分享给大家供大家参考,具体如下: Jquery给基本控件的取值.赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value&qu

跟我学jquery(三)jquery动态创建元素和常用函数示例 .

在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些头晕的API 主要讲解动态创建元素操作jQuery包装集的各个函数 一.动态创建元素 (这块转至网络,具体地址不详,以前找到的资料)) 1.错误的编程方法 我们经常使用javascript动态的创建元素, 有很多程序员通过直接更改某一个容器的HTML内容.比如: [html] view plainc

jQuery 屏蔽单个元素使用户无法点击

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://ajax.go

jQuery获取页面元素绝对与相对位置的方法

 本文实例讲述了jQuery获取页面元素绝对与相对位置的方法.分享给大家供大家参考.具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: 1 2 var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: 1 2 3 4 var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var

jQuery判断一个元素是否可见的方法

  本文实例讲述了jQuery判断一个元素是否可见的方法.分享给大家供大家参考.具体如下: jQuery 可以很容易地确定一个元素是可见的或是隐藏的,然后分别做不同的处理.如:我想根据某 div 是否可见,在按钮上显示不同的文字和图标.可以这样实现: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 $('#para_div button').click(function() { if($(this).next().is(":visible")) { //$(this).h

jQuery解析XML文件同时动态增加js文件的方法

  本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj)

jQuery获得子元素个数的方法

 本文实例讲述了jQuery获得子元素个数的方法.分享给大家供大家参考.具体分析如下: 1 2 3 4 //获取id=div1下的子元素的个数 $('#div1').children().length; //获取id=div1下的span元素个数 $('#div1').children('span').length;