jquery 图片 上一张 下一张 链接效果(续篇)

  前段时间写了篇图片 上一张 下一张 链接效果,后来看到 jquery插件封装,手里痒痒的,拿这个例子做ex.

  封装后的JS源码:

  

复制代码 代码如下:

  /*

  * imageupdown 1.0

  * Copyright (c) 2009

  * Date: 2010-04-20

  * 图片移动上一张 下一张特效

  */

  (function($){

  $.fn.imageupdown = function(options){

  var defaults = {

  upCursor:"pre.cur",

  upTitle:"点击查看上一张",

  upUrl:$(this).attr('left'),

  downCursor:"next.cur",

  downTitle:"点击查看下一张",

  downUrl:$(this).attr('right')

  }

  var options = $.extend(defaults, options);

  this.each(function(){

  var thisImage=$(this);

  $(thisImage).bind("mousemove",function(e){

  var positionX=e.originalEvent.x||e.originalEvent.layerX||0;

  if(positionX<=$(this).width()/2){

  this.style.cursor='url('+options.upCursor+'),auto';

  $(this).attr('title',''+options.upTitle+'');

  $(this).parent().attr('href',''+options.upUrl+'');

  }else{

  this.style.cursor=''+options.downCursor+'';

  $(this).attr('title',''+options.downTitle+'');

  $(this).parent().attr('href',''+options.downUrl+'');

  }

  });

  });

  };

  })(jQuery);

  html页面调用方法:

  

复制代码 代码如下:

  <script type="text/javascript">

  $(document).ready(function() {

  $(".rootclass").imageupdown();

  });

  </script>

  可能有疑惑的地方:

  (1)function(e) e 是什么意思

  应该是对应事件。

  $().click(function(e) {}); // 这里的e是click事件

  $().focus(function(e) {});// 这里的e是focus事件