您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > jQuery > jQuery特效 > jQuery相册代码特效 > 正文

jQuery网格布局大小图切换效果

2014-02-11 05:02:25 作者:天外飞仙 人气:1678 Views

jQuery网格布局大小图切换效果
jQuery网格布局大小图切换效果
部分jQ代码

<script type="text/javascript"> $(function() { // cache first carousel var $org = $('.carousel'); // variables var width = 800, height = 500, cols = 8, rows = 5, $img = $org.children() imgs = $img.length; // duplicate carouesl for( a = 0; a < rows * cols; a++ ) { $('#wrapper').append( $org.clone() ); } // cache all carousls $all = $('.carousel'); $all.each(function( i ) { // current row and column var row = Math.floor( i / cols ), col = i % cols; var $t = $(this), i2 = i % imgs, $x = $img.eq( i2 ).clone(); // first image -> thumbnail $x.addClass( 'thumb' ); $t.prepend( $x ); var $d = $t.children(); // onClick start scrolling the first carousel $t.click(function() { var d = ( $t.triggerHandler( 'currentPosition' ) == 0 ) ? i2+1 : 0; $org.trigger( 'slideTo', d ); }); // set width + height $t.add( $d ).css({ width: width / cols, height: height / rows }); // position images $d.children().css({ left: -(col * (width / cols)), top: -(row * (height / rows)) }); }); // create carousels $all.carouFredSel({ circular: false, items: { visible: 1, width: width / cols, height: height / rows }, scroll: { fx: 'directscroll', onBefore: function() { var $t = $(this); // trigger next carousel to scroll after 25 ms. setTimeout(function() { $t.parent().next().children().trigger( 'slideTo', $t.triggerHandler( 'currentPosition' ) ); }, 25); } } }).trigger( 'pause' ); }); </script>

下载地址
预览地址

链接:http://www.jqueryba.com/2149.html(转载时请注明本文出处及文章链接)

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!