jquery插件教程（二）

Posted

今天死胖子又来讨JS了，效果还是简单，几行代码就能搞定。这就算jquery插件教程二吧。

需求：鼠标移动到某个区域显示指定区域的内容，移开内容消失。

先看效果。在线示例：Demo

说明

1.既然是jquery插件，首先肯定是得引入jquer包。这里我用了google服务器上的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2.然后是插件代码了

<script language="javascript" type="text/javascript">
(function( $ ) {
   $.fn.myplugin2 = function(options) {
        var obj = options ;
     $(this).mouseenter(function() {
         $(obj).show(500);
       });
     $(this).parent().mouseleave(function() {
            $(obj).hide(500);
       })
  };
})( jQuery );
</script>

这里图个省事直接写到html页面里面了。

3.接下来是使用了

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#a1').myplugin2($('#p'));    //给id为a1的元素绑定写好的插件，参数传id为P的对象。
  $('#a2').myplugin2($('#d'));
})
</script>

这里给需要鼠标移动到某个元素a1绑定写好的插件，参数传的是内容元素对象是个OBJ的。参数一定得是对象。

总结

  • mouseenter: 鼠标点击控件区域触发
  • mousehover: 鼠标划过控件区域触发
  • mouseleave: 鼠标离开控件区域触发
  • mousemove: 鼠标在控件区域内移动触发
  • mousedown: 鼠标在控件区域内按下触发
  • mouseup: 鼠标在控件区域内按下后放开触发

好了就这么多。具体看在线示例Demo

本文为原创转载请注明出处 83

Comments are closed.