jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
更新时间：2010年03月21日 11:48:18 作者：
鼠标移动上去，元素的left增加N像素，鼠标移开会慢慢的移动到原来的位置
此控件是基于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>
控件代码
复制代码 代码如下:
$.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>
相关文章
仿淘宝京东多条件筛选可自行结合ajax加载，使用Jquery简单实现，具体如下，喜欢的朋友可以参考下2013-08-08
这篇文章主要为大家详细介绍了jQuery实现简单评论区，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了jQuery实现节点的追加、替换、删除、复制功能,结合具体实例形式分析了jQuery针对DOM节点的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以参考下2017-07-07
下面小编就为大家分享一篇jQuery中库的引用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
jQuery ajax中使用confirm,确认是否删除的简单实例
下面小编就为大家带来一篇jQuery ajax 中使用confirm ,确认是否删除的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jquery+css实现动感的图片切换效果，效果实现很精致，动画简洁大方，推荐给大家，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery实现的动态伸缩导航菜单,实例分析了jQuery鼠标事件及animate、hide等方法的使用技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jquery衣服颜色选取插件效果，很有艺术感，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
jquery的trigger和triggerHandler的区别示例介绍
这篇文章主要介绍了jquery的trigger和triggerHandler的区别,需要的朋友可以参考下2014-04-04
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料，需要的朋友可以参考下。2017-08-08
最新评论