使用JQ控制图片大小的特效代码,JQ控制图片大小代码，100%满屏显示，可加载更多，适合相册或摄影展示，源码搜藏推荐下载！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,js控制的图片大小特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为js控制的图片大小特效，属于站长常用代码，更多js控制的图片大小特效代码请访问源码搜藏JS代码频道。" />
<title>js控制的图片大小特效_源码搜藏</title>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.montage.min.js"></script>
</head>
<body style="background:#000;">
<!-- 代码 开始 -->
<div class="container">
<div id="overlay" class="content">
</div>
<div class="am-container" id="am-container">
<a href="#"><img src="images/1.jpg"></a>
<a href="#"><img src="images/2.jpg"></a>
<a href="#"><img src="images/3.jpg"></a>
<a href="#"><img src="images/4.jpg"></a>
<a href="#"><img src="images/5.jpg"></a>
<a href="#"><img src="images/6.jpg"></a>
<a href="#"><img src="images/7.jpg"></a>
<a href="#"><img src="images/8.jpg"></a>
<a href="#"><img src="images/9.jpg"></a>
<a href="#"><img src="images/10.jpg"></a>
<a href="#"><img src="images/11.jpg"></a>
<a href="#"><img src="images/12.jpg"></a>
<a href="#"><img src="images/13.jpg"></a>
<a href="#"><img src="images/14.jpg"></a>
<a href="#"><img src="images/15.jpg"></a>
<a href="#"><img src="images/16.jpg"></a>
<a href="#"><img src="images/17.jpg"></a>
<a href="#"><img src="images/18.jpg"></a>
<a href="#"><img src="images/19.jpg"></a>
<a href="#"><img src="images/20.jpg"></a>
<a href="#"><img src="images/21.jpg"></a>
<a href="#"><img src="images/22.jpg"></a>
<a href="#"><img src="images/23.jpg"></a>
<a href="#"><img src="images/24.jpg"></a>
<a href="#"><img src="images/25.jpg"></a>
<a href="#"><img src="images/26.jpg"></a>
<a href="#"><img src="images/27.jpg"></a>
<a href="#"><img src="images/28.jpg"></a>
<a href="#"><img src="images/29.jpg"></a>
<a href="#"><img src="images/30.jpg"></a>
<a href="#"><img src="images/31.jpg"></a>
<a href="#"><img src="images/32.jpg"></a>
<a href="#"><img src="images/33.jpg"></a>
<a href="#"><img src="images/34.jpg"></a>
<a href="#"><img src="images/35.jpg"></a>
<a href="#"><img src="images/36.jpg"></a>
<a href="#"><img src="images/37.jpg"></a>
<a href="#"><img src="images/38.jpg"></a>
<a href="#"><img src="images/39.jpg"></a>
<a href="#"><img src="images/40.jpg"></a>
<a href="#"><img src="images/41.jpg"></a>
<a href="#"><img src="images/42.jpg"></a>
<a href="#"><img src="images/43.jpg"></a>
<a href="#"><img src="images/44.jpg"></a>
<a href="#"><img src="images/45.jpg"></a>
<a href="#"><img src="images/46.jpg"></a>
<a href="#"><img src="images/47.jpg"></a>
<a href="#"><img src="images/48.jpg"></a>
<a href="#"><img src="images/49.jpg"></a>
<a href="#"><img src="images/50.jpg"></a>
<a href="#"><img src="images/51.jpg"></a>
<a href="#"><img src="images/52.jpg"></a>
<a href="#"><img src="images/53.jpg"></a>
<a href="#"><img src="images/54.jpg"></a>
<a href="#"><img src="images/55.jpg"></a>
<a href="#"><img src="images/56.jpg"></a>
<a href="#"><img src="images/57.jpg"></a>
<a href="#"><img src="images/58.jpg"></a>
<a href="#"><img src="images/59.jpg"></a>
<a href="#"><img src="images/60.jpg"></a>
<a href="#"><img src="images/61.jpg"></a>
<a href="#"><img src="images/62.jpg"></a>
<a href="#"><img src="images/63.jpg"></a>
<a href="#"><img src="images/64.jpg"></a>
<a href="#"><img src="images/65.jpg"></a>
<a href="#"><img src="images/66.jpg"></a>
<a href="#"><img src="images/67.jpg"></a>
<a href="#"><img src="images/68.jpg"></a>
<a href="#"><img src="images/69.jpg"></a>
<a href="#"><img src="images/70.jpg"></a>
<a href="#"><img src="images/71.jpg"></a>
<a href="#"><img src="images/72.jpg"></a>
<a href="#"><img src="images/73.jpg"></a>
</div>
<div id="loadmore" class="loadmore" style="width:100%; height:30px; clear:both;">load more...</div>
</div>
<script type="text/javascript">
$(function() {
/*
* just for this demo:
*/
$('#showcode').toggle(
function() {
$(this).addClass('up').removeClass('down').next().slideDown();
},
function() {
$(this).addClass('down').removeClass('up').next().slideUp();
}
);
$('#panel').toggle(
function() {
$(this).addClass('show').removeClass('hide');
$('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 );
},
function() {
$(this).addClass('hide').removeClass('show');
$('#overlay').stop().animate( { left : '0px' }, 300 );
}
);
// initialize the plugin
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
minsize : true,
margin : 2
});
/*
* just for this demo:
*/
$('#overlay').fadeIn(500);
var imgarr = new Array();
for( var i = 1; i <= 73; ++i ) {
imgarr.push( i );
}
$('#loadmore').show().bind('click', function() {
var len = imgarr.length;
for( var i = 0, newimgs = ''; i < 15; ++i ) {
var pos = Math.floor( Math.random() * len ),
src = imgarr[pos];
newimgs += '<a href="#"><img src="images/' + src + '.jpg"/></a>';
}
var $newimages = $( newimgs );
$newimages.imagesLoaded( function(){
$container.append( $newimages ).montage( 'add', $newimages );
});
});
}
}).attr('src',$img.attr('src'));
});
});
</script>
<!-- 代码 结束 -->
<div style="text-align:center;line-height:24px">
<p>来源：<a href="http://www.codesocang.com/" target="_blank">懒人图库</a> 代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢：<a href="http://www.codesocang.com/" target="_blank">西西</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
jQuery下拉显示图片相册代码
jQuery手风琴式相册图片特效相册代码下载排行
-
2017-07-06
-
2015-09-17
-
2014-04-12
-
2014-10-13
-
2014-06-30
-
2015-02-05
-
2015-02-05
-
2015-02-05
最新文章
-
2017-07-06
-
2015-09-17
-
2015-03-02
-
2015-02-05
-
2015-02-05
-
2015-02-05
-
2015-02-05
-
2015-02-05
热门源码
