爱胖博客

http://sifang.com

它用图片实现的,我ps+css烂,还是jquery简单些,有问题给我留言哦 :-)

    var BGSC = 4; //阴影的宽度 这里是4个px
    for(var BGSi=1;BGSi<BGSC;BGSi++){
        if(!$('.BGShadow'+BGSi).length){
            $('.wrapper').append('<div class="BGShadow'+BGSi+'"></div>');
             //这里的.wrapper是需要添加阴影的对象~
        }
        $('.BGShadow'+BGSi).css({position:'absolute',left:$('.wrapper').offset().left-BGSi
                ,top:$('.wrapper').offset().top-BGSi,width:$('.wrapper').width()+BGSi*2+'px'
                ,height:$('.wrapper').height()+BGSi*2+'px',zIndex:-BGSi
                ,backgroundColor:'#555',opacity:'0.08'});
    }

版本暂定为0.1吧
参考效果:http://ecug.ncu.me/test/op/photo.php

    jQuery.extend({macosphotoview:function(element,images,speed,width,height,preloadcount){
        var i=0;
        var j=0;
        $(element).html("<img id='imageholder' width='"+(width==null?"240":width)+"' style='height:"+(height==null?"240":height)+"px;' src='"+images[0]+"' />").mouseover(function(){
            $(this).attr('accesskey','1');
            for(var xi=0;xi<images.length;xi++){
                imagestopreload += "<img src='"+images[xi]+"' />";
            }
            $('#macosphotoview_preload').append(imagestopreload);
        }).mouseout(function(){
            $(this).attr('accesskey','0');
        }).mousemove(function(){
            if(i>images.length-1){
                i=-1;
            }
            if($(this).attr('accesskey')=='1'){
                j++;
                if(speed==null){
                    speed=8;
                }
                if(j>speed){
                    i++;
                    if(images[i]!='') $(this).children().attr('src',images[i]);
                    j=0;
                }
            }
        });
        if(!$("#macosphotoview_preload").length){
            $('body').append("<div style='display:none' id='macosphotoview_preload'></div>");
        }
        var imagestopreload="";
        if(preloadcount==null){
            preloadcount=4;
        }
        preloadcount = preloadcount>images.length?images.length:preloadcount;
        for(var xi=0;xi<preloadcount;xi++){
            imagestopreload += "<img src='"+images[xi]+"' />";
        }
        $('#macosphotoview_preload').append(imagestopreload);
    }});

用法及参数介绍:

    $(document).ready(function(){
         $.macosphotoview('#imagecontainer',currentimages);
         $.macosphotoview('#imagecontainer1',currentimages,4);
         $.macosphotoview('#imagecontainer2',currentimages,12);
         $.macosphotoview('#imagecontainer3',currentimages,8,480,320);
         $.macosphotoview('#imagecontainer4',currentimages,8,480,320,10);
    });
//参数1为element的id啊class什么的,第二个参数为图片数组,第三个参数为图片切换速度(值越大越慢),第四第五个参数为图片的宽和高,第六个参数为预加载的图片数量
});