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

2016-02-19 13:46 23 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的，喜欢的朋友可以分享一下，也算是给小编一份支持，大家都不容易啊!

【 tulaoshi.com - Web开发】

此控件是基于Jquery开发的，要引用Jquery框架
控件代码

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
$.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代码

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
spansadfsadfds/spanbr /
JAVASCRIPT代码
script type="text/javascript"
$(function() {
$("#Span1").myNudge();
});
/script

来源:http://www.tulaoshi.com/n/20160219/1605172.html

上一篇：无废话C#设计模式之十三：Decorator
下一篇：正则表达式不可打印字符

看过《jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的》的人还看了以下文章更多>>

酷狗如何把歌曲移动到“我的最爱”中

酷狗如何把歌曲移动到“我的最爱”中在播放列表中右键点击需要移动的歌曲，选择移动到列表将歌曲移动到我的最爱。如(图1) 图1

鼠标移动到一张图片时变为另一张图片

标签： Web开发

代码如下：用以下代码. script language="JavaScript"!-- c0off = new Image(80,30); c0off.src = "图片1位置"; c0on = new Image(80,30); c0on.src = "图片2位置"; function img_act(imgName) { imgOn = eval(i...

JQuery 将元素显示在屏幕的中央的代码

标签： Web开发

代码如下： (function($){ $.fn.center = function(){ var top = ($(window).height() - this.height())/2; var left = ($(window).width() - this.width())/2; var scrollTop = $(document).scrollTop(); var scrollLeft = $(document).scrollLeft(); return this.css( { position : 'absolute', 'top' : top + scrollTop, left : lef...

jquery ready()的几种实现方法小结

标签： Web开发

1.最常用也是最标准的代码如下： $(document).ready(){ }); 2.是上面的简写: 代码如下： $(function(){ }) 很奇怪？为什么能这样？不是判断document对象是否 reADy然后才执行函数的么?document哪去了?我们看下jQuery的源代码: 代码如下： // jQuery的构造函数； var jQuery = function( a, c ) { // $(document).ready(...

jquery 实现的全选和反选

标签： Web开发

代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / style type="text/css" #newsTable{margin:100px auto;} /style scrip...

查看更多精彩>>