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

    很久没写文章了,这段时间一直在做类似鲜果的一个应用和数据采集,还有就是对企业和个人成长的思考。

    前段时间写了篇图片 上一张 下一张 链接效果,后来看到 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事件

   源码

原文地址:https://www.cnblogs.com/dooom/p/1715819.html