keleyi.com 柯乐义 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/30.htm 本特效支持jquery的版本为1.4.3,暂时不支持1.9以上jquery版本。 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="keywords" content="" />" <meta name="description" content="" /> <title>jQuery拼图照片墙相册--柯乐义</title> <link rel="stylesheet" href="30/css/keleyitupianqiang.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.3.min.js"></script> <script src="30/js/jquery.transform-0.9.1.min.js"></script> </head> <body> <!-- 代码 开始 --> <h1>图片墙相册 合并图片盒<span> 使用jQuery <a href="http://keleyi.com/a/bjad/g2espcgs.htm">原文</a></span></h1> <div id="im_wrapper" class="im_wrapper"> <div style="background-position:0px 0px;"><img src="30/images/thumbs/1.jpg" alt="" /></div> <div style="background-position:-125px 0px;"><img src="30/images/thumbs/2.jpg" alt="" /></div> <div style="background-position:-250px 0px;"><img src="30/images/thumbs/3.jpg" alt="" /></div> <div style="background-position:-375px 0px;"><img src="30/images/thumbs/4.jpg" alt="" /></div> <div style="background-position:-500px 0px;"><img src="30/images/thumbs/5.jpg" alt="" /></div> <div style="background-position:-625px 0px;"><img src="30/images/thumbs/6.jpg" alt="" /></div> <div style="background-position:0px -125px;"><img src="30/images/thumbs/7.jpg" alt="" /></div> <div style="background-position:-125px -125px;"><img src="30/images/thumbs/8.jpg" alt="" /></div> <div style="background-position:-250px -125px;"><img src="30/images/thumbs/9.jpg" alt="" /></div> <div style="background-position:-375px -125px;"><img src="30/images/thumbs/10.jpg" alt="" /></div> <div style="background-position:-500px -125px;"><img src="30/images/thumbs/11.jpg" alt="" /></div> <div style="background-position:-625px -125px;"><img src="30/images/thumbs/12.jpg" alt="" /></div> <div style="background-position:0px -250px;"><img src="30/images/thumbs/13.jpg" alt="" /></div> <div style="background-position:-125px -250px;"><img src="30/images/thumbs/14.jpg" alt="" /></div> <div style="background-position:-250px -250px;"><img src="30/images/thumbs/15.jpg" alt="" /></div> <div style="background-position:-375px -250px;"><img src="30/images/thumbs/16.jpg" alt="" /></div> <div style="background-position:-500px -250px;"><img src="30/images/thumbs/17.jpg" alt="" /></div> <div style="background-position:-625px -250px;"><img src="30/images/thumbs/18.jpg" alt="" /></div> <div style="background-position:0px -375px;"><img src="30/images/thumbs/19.jpg" alt="" /></div> <div style="background-position:-125px -375px;"><img src="30/images/thumbs/20.jpg" alt="" /></div> <div style="background-position:-250px -375px;"><img src="30/images/thumbs/21.jpg" alt="" /></div> <div style="background-position:-375px -375px;"><img src="30/images/thumbs/22.jpg" alt="" /></div> <div style="background-position:-500px -375px;"><img src="30/images/thumbs/23.jpg" alt="" /></div> <div style="background-position:-625px -375px;"><img src="30/images/thumbs/24.jpg" alt="" /></div> </div> <div id="im_loading" class="im_loading"></div> <div id="im_next" class="im_next"></div> <div id="im_prev" class="im_prev"></div> <div> <span class="reference"> <a href="http://keleyi.com">Home</a> <a href="http://keleyi.com">Images by keleyi</a> </span> </div> <!-- The JavaScript --> <script type="text/javascript"> //Paul Irish smartresize : http://keleyi.com // debouncing function from John Hann // http://keleyi.com/ (function ($, sr) { var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } //smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); </script> <script type="text/javascript"> $(function() { //check if the user made the //mistake to open it with IE var ie = false; if ($.browser.msie) ie = true; //flag to control the click event var flg_click = true; //the wrapper var $im_wrapper = $('#im_wrapper'); //the thumbs var $thumbs = $im_wrapper.children('div'); //all the images var $thumb_imgs = $thumbs.find('img'); //number of images var nmb_thumbs = $thumbs.length; //image loading status var $im_loading = $('#im_loading'); //the next and previous buttons var $im_next = $('#im_next'); var $im_prev = $('#im_prev'); //number of thumbs per line var per_line = 6; //number of thumbs per column var per_col = Math.ceil(nmb_thumbs/per_line) //index of the current thumb var current = -1; //mode = grid | single var mode = 'grid'; //an array with the positions of the thumbs //we will use it for the navigation in single mode var positionsArray = []; for(var i = 0; i < nmb_thumbs; ++i) positionsArray[i]=i; //preload all the images $im_loading.show(); var loaded = 0; $thumb_imgs.each(function(){ var $this = $(this); $('<img/>').load(function(){ ++loaded; if(loaded == nmb_thumbs*2) start(); }).attr('src',$this.attr('src')); $('<img/>').load(function(){ ++loaded; if(loaded == nmb_thumbs*2) start(); }).attr('src',$this.attr('src').replace('/thumbs','')); }); //starts the animation function start(){ $im_loading.hide(); //disperse the thumbs in a grid disperse(); } //disperses the thumbs in a grid based on windows dimentions function disperse(){ if(!flg_click) return; setflag(); mode = 'grid'; //center point for first thumb along the width of the window var spaces_w = $(window).width()/(per_line + 1); //center point for first thumb along the height of the window var spaces_h = $(window).height()/(per_col + 1); //let's disperse the thumbs equally on the page $thumbs.each(function(i){ var $thumb = $(this); //calculate left and top for each thumb, //considering how many we want per line var left = spaces_w*((i%per_line)+1) - $thumb.width()/2; var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2; //lets give a random degree to each thumb var r = Math.floor(Math.random()*41)-20; /* now we animate the thumb to its final positions; we also fade in its image, animate it to 115x115, and remove any background image of the thumb - this is not relevant for the first time we call disperse, but when changing from single to grid mode */ if(ie) var param = { 'left' : left + 'px', 'top' : top + 'px' }; else var param = { 'left' : left + 'px', 'top' : top + 'px', 'rotate' : r + 'deg' }; $thumb.stop() .animate(param,700,function(){ if(i==nmb_thumbs-1) setflag(); }) .find('img') .fadeIn(700,function(){ $thumb.css({ 'background-image' : 'none' }); $(this).animate({ 'width' : '115px', 'height' : '115px', 'marginTop' : '5px', 'marginLeft': '5px' },150); }); }); } //controls if we can click on the thumbs or not //if theres an animation in progress //we don't want the user to be able to click function setflag(){ flg_click = !flg_click } /* when we click on a thumb, we want to merge them and show the full image that was clicked. we need to animate the thumbs positions in order to center the final image in the screen. The image itself is the background image that each thumb will have (different background positions) If we are currently seeing the single image, then we want to disperse the thumbs again, and with this, showing the thumbs images. */ $thumbs.bind('click',function(){ if(!flg_click) return; setflag(); var $this = $(this); current = $this.index(); if(mode == 'grid'){ mode = 'single'; //the source of the full image var image_src = $this.find('img').attr('src').replace('/thumbs',''); $thumbs.each(function(i){ var $thumb = $(this); var $image = $thumb.find('img'); //first we animate the thumb image //to fill the thumbs dimentions $image.stop().animate({ 'width' : '100%', 'height' : '100%', 'marginTop' : '0px', 'marginLeft': '0px' },150,function(){ //calculate the dimentions of the full image var f_w = per_line * 125; var f_h = per_col * 125; var f_l = $(window).width()/2 - f_w/2 var f_t = $(window).height()/2 - f_h/2 /* set the background image for the thumb and animate the thumbs postions and rotation */ if(ie) var param = { 'left' : f_l + (i%per_line)*125 + 'px', 'top' : f_t + Math.floor(i/per_line)*125 + 'px' }; else var param = { 'rotate': '0deg', 'left' : f_l + (i%per_line)*125 + 'px', 'top' : f_t + Math.floor(i/per_line)*125 + 'px' }; $thumb.css({ 'background-image' : 'url('+image_src+')' }).stop() .animate(param,1200,function(){ //insert navigation for the single mode if(i==nmb_thumbs-1){ addNavigation(); setflag(); } }); //fade out the thumb's image $image.fadeOut(700); }); }); } else{ setflag(); //remove navigation removeNavigation(); //if we are on single mode then disperse the thumbs disperse(); } }); //removes the navigation buttons function removeNavigation(){ $im_next.stop().animate({'right':'-50px'},300); $im_prev.stop().animate({'left':'-50px'},300); } //add the navigation buttons function addNavigation(){ $im_next.stop().animate({'right':'0px'},300); $im_prev.stop().animate({'left':'0px'},300); } //User clicks next button (single mode) $im_next.bind('click',function(){ if(!flg_click) return; setflag(); ++current; var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')'); if($next_thumb.length>0){ var image_src = $next_thumb.find('img').attr('src').replace('/thumbs',''); var arr = Array.shuffle(positionsArray.slice(0)); $thumbs.each(function(i){ //we want to change each divs background image //on a different point of time var t = $(this); setTimeout(function(){ t.css({ 'background-image' : 'url('+image_src+')' }); if(i == nmb_thumbs-1) setflag(); },arr.shift()*20); }); } else{ setflag(); --current; return; } }); //User clicks prev button (single mode) $im_prev.bind('click',function(){ if(!flg_click) return; setflag(); --current; var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')'); if($prev_thumb.length>0){ var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs',''); var arr = Array.shuffle(positionsArray.slice(0)); $thumbs.each(function(i){ var t = $(this); setTimeout(function(){ t.css({ 'background-image' : 'url('+image_src+')' }); if(i == nmb_thumbs-1) setflag(); },arr.shift()*20); }); } else{ setflag(); ++current; return; } }); //on windows resize call the disperse function $(window).smartresize(function(){ removeNavigation() disperse(); }); //function to shuffle an array Array.shuffle = function( array ){ for( var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x ); return array; }; }); </script> <!-- 代码 结束 --> </body> </html>
相关推荐
jquery照片墙 jquery照片墙 jquery照片墙
jQuery ImageWall照片墙相册特效,一款可作为网页相册的图片墙特效,图片平铺显示,像一堵墙那样,现在很流行这效果,鼠标放上去图片会放大显示,运用jquery CSS Div 技术编写而成。
jQuery照片墙小图合成大图动画代码基于jquery.1.10.2.min.js制作,点击照片墙小图合成大图,动画效果,再次点击大图,变成之前照片墙效果,图片墙小图合成大图动画变换效果。
http://www.5icool.org/demo/2011/a00470/ 演示
今天我们要给大家分享一款非常个性化的照片墙,它的特点是我们可以将照片随意的陈列在桌面上,可以是不同的摆放角度;另外一个特点是图片的边框是邮票样式的,一张张图片就像漂亮的邮票一样,而且鼠标滑过图片时,...
jQuery自动播放的照片墙特效是一款基于jquery实现的照片墙效果,支持自动播放,大图居中显示。
jquery全页照片墙画廊
jQuery水平滑块拖动照片墙是一款基于jQuery实现的水平滑块拖动照片墙展示效果和点击图片可以放大结合。
jQuery CSS3实现的照片墙展示
jQuery中间大图两侧小图模糊特效是一款使用两组相同的图片作为前后两组旋转木马,背景使用CSS滤镜将其模糊,两组旋转木马可以同步进行运动。
基于ThreeJs的3D图片相册插件,支持鼠标滚轮控制图片切换,仅兼容支持3D功能的浏览器,可以调整相册视角,支持循环轮播。
一个好看的图片滚动html模板,可以将多个大图进行滚动,使用jquery组件
图片墙|图片展示墙特效,里面的jquery类库已为您修正为正确的地址,这款图片墙其实就是一个相册展示效果,下边的小圆点代表缩略图,鼠标放上的时候会显示出图片,上边的滑块用来指示当前的位置,请在支持HTML5的...
css3仿虾米网banner相片墙是一款jquery css3实现的虾米网首页顶部banner照片墙。