jquery大幅图片墙裁剪特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery大幅图片墙裁剪特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery大幅图片墙裁剪</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="js/large_thumbs.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
  <div id="content">
    <div id="title"><img src="img/title.gif" width="283" height="45" alt="jquery photogallery" /><br />
<br />
</div>
    <div id="arrow_wrap">
      <div id="prev"><a href="javascript:void(0);"><img src="img/prev.png" alt="prev" /></a></div>
      <div id="photo_wrap">
        <div id="close_msg" class="hide">
          <p>Click Image To close</p>
        </div>
        <ul id="thumbs">
          <li>
            <ul class="group">
              <li>
                <div class="thumb_img"><a href="img/image1.jpg"><img src="img/thumbs/thumb1.jpg" alt="thumb1" /></a></div>
                <div class="thumb_desc">
                  <p>This texture came from an advertising board on the streets of New York.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image2.jpg"><img src="img/thumbs/thumb2.jpg" alt="thumb2" /></a></div>
                <div class="thumb_desc">
                  <p>This texture is from a wall I took a photo of.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image3.jpg"><img src="img/thumbs/thumb3.jpg" alt="thumb3" /></a></div>
                <div class="thumb_desc">
                  <p>This is some old wood with some interesting paint on it.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image4.jpg"><img src="img/thumbs/thumb4.jpg" alt="thumb4" /></a></div>
                <div class="thumb_desc">
                  <p>This is another old advertising board that had been picked apart</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image5.jpg"><img src="img/thumbs/thumb5.jpg" alt="thumb5" /></a></div>
                <div class="thumb_desc">
                  <p>I don't remember if I downloaded this one or shot it, but it is a garage door.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image6.jpg"><img src="img/thumbs/thumb6.jpg" alt="thumb1" /></a></div>
                <div class="thumb_desc">
                  <p>This is on an iron rail outside a brownstone that has been rusted.</p>
                </div>
              </li>
            </ul>
            <ul class="group">
              <li>
                <div class="thumb_img"><a href="img/image7.jpg"><img src="img/thumbs/thumb7.jpg" alt="thumb1" /></a></div>
                <div class="thumb_desc">
                  <p>Another concrete texture. Interesting colors.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image8.jpg"><img src="img/thumbs/thumb8.jpg" alt="thumb2" /></a></div>
                <div class="thumb_desc">
                  <p>Texture of rusted metal that I got off stockxchange.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image9.jpg"><img src="img/thumbs/thumb9.jpg" alt="thumb3" /></a></div>
                <div class="thumb_desc">
                  <p>Some weird "broccoli" according to my roomate, although I think it is suspect.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image10.jpg"><img src="img/thumbs/thumb10.jpg" alt="thumb4" /></a></div>
                <div class="thumb_desc">
                  <p>Some wood with graffiti on it and some kind of paper.</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image11.jpg"><img src="img/thumbs/thumb11.jpg" alt="thumb5" /></a></div>
                <div class="thumb_desc">
                  <p>Another rusty door for your pleasure</p>
                </div>
              </li>
              <li>
                <div class="thumb_img"><a href="img/image12.jpg"><img src="img/thumbs/thumb12.jpg" alt="thumb1" /></a></div>
                <div class="thumb_desc">
                  <p>This is the sidewalk on the north side of houston and mott I believe in NYC.</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- end thumbs-->
        <div class="loading"><img src="img/ajax-loader.gif" /></div>
        <div id="large_images">
          
        </div>
        <!--end photo wrap -->
        
      </div>
      <div id="next"><a href="javascript:void(0);"><img src="img/next.png" alt="next" /></a></div>
      <!--end arrow wrap -->
    </div>
    <!-- end content-->
  </div>
</div>
<!-- end wrapper -->
</body>
</html>

JS代码(large_thumbs.js):

/* http://jamesvec.com large thumbs v2 Written by james vecchio (jamesvec[at]gmail.com) June 2010. Feel free to use this on any project. I would love to see what people do with it,so drop me a line if you use it. */
$(document).ready (function(){
	//loops to add classes and identifiers$('.thumb_desc').each(function(index,element){
	$(element).attr("class",'hide');
}
);
	$(".group li a").each(function(index,element){
	$(element).attr("rel",'image'+index);
}
);
	//variablesvar mainImg = "";
	var showImg = "";
	var contWidth = $('#photo_wrap').width();
	var groups = $('.group').size();
	var totalWidth = groups*contWidth;
	var sectCount = 0;
	//slider if needed $('#thumbs').css('width',totalWidth);
	//if there are more than 6 items scroll if(groups>1){
	$('#next a').css('display','inline');
}
$('#prev a').click(function(){
	if(sectCount >0){
	$('#thumbs').animate({
	left:'+='+contWidth+'px'}
,{
	duration:'slow',easing:'swing'}
) sectCount=sectCount-1;
	//if there is no more sections to show hide arrow if(sectCount==groups){
	$('#next a').css('display','none');
}
else{
	$('#next a').css('display','inline');
}
if (sectCount ==0){
	$('#prev a').css('display','none');
}
else{
	$('#prev a').css('display','inline');
}
}
}
) $('#next a').click (function(){
	if(sectCount<groups-1){
	$('#thumbs').animate({
	left:'-='+contWidth+'px'}
,{
	duration:'slow',easing:'swing'}
) sectCount = sectCount+1;
	//if there is no more sections to show hide arrow if(sectCount==groups-1){
	$('#next a').css('display','none');
}
else{
	$('#next a').css('display','inline');
}
if (sectCount ==0){
	$('#prev a').css('display','none');
}
else{
	$('#prev a').css('display','inline');
}
}
}
);
	// hover function SHOW ME DESCRIPTIONS MAN!$('.group li').hover (function(){
	$(this).children('.hide').slideToggle('fast');
}
);
	//click thumbs function MAGIC!$('.thumb_img a').click (function(){
	showImg = $(this).attr("href");
	$('.loading').fadeIn('slow',loadImage());
	return false;
	function loadImage(){
	var img = new Image;
	$(img).load(function (){
	$('.loading').fadeOut('slow',function(){
	$('#close_msg').fadeTo('slow',0.5).delay(500).fadeOut('slow');
}
);
	$('#large_images').append(this,showImgs());
}
).error(function (){
	// notify the user that the image could not be loaded}
).attr('src',showImg).addClass('current');
}
function showImgs(){
	$('#large_images').fadeIn('slow');
	$('#prev a').fadeOut('slow');
	$('#next a').fadeOut('slow');
}
}
);
	//close image function$('#large_images').click (function(){
	$(this).fadeOut('slow',function(){
	$('.current').remove();
}
);
	//see which arrows to display if(sectCount==groups-1){
	$('#next a').css('display','none');
}
else{
	$('#next a').css('display','inline');
}
if (sectCount ==0){
	$('#prev a').css('display','none');
}
else{
	$('#prev a').css('display','inline');
}
}
);
}
);

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
p{color:#FFF;font-family:'Georgia',Times New Roman,Times,serif;font-style:italic;font-size:0.8em;line-height:1.5em;}
img{border:0;}
#title{width:283px;float:left;display:inline;margin:10px 0 10px 63px;}
#wrapper{width:1000px;margin:auto}
#content{width:1000px;float:left;display:inline;}
#arrow_wrap{width:1000px;float:left;display:inline;}
#photo_wrap{width:855px;height:478px;position:relative;float:left;display:inline;border:#464646 3px dashed;margin:5px;overflow:hidden;}
#thumbs{position:absolute;z-index:10;left:0;list-style-type:none;display:inline;}
#thumbs li{float:left;display:inline;}
#close_msg{background:#000;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #000;padding:10px;width:300px;text-align:center;position:absolute;z-index:14;top:45%;left:31%;}
#large_images{position:absolute;z-index:13;}
#large_images img{border:#464646 5px solid;width:845px;height:468px;}
#next{width:60px;float:left;display:inline;margin:5px 0;}
#prev{width:60px;float:left;display:inline;margin:5px 0;}
#prev a,#next a{display:none;}
.group{position:relative;float:left;display:inline;width:855px;}
.group li{margin:7px;}
.thumb_img{border:#ccc 1px solid;}
.group li,.thumb_img{float:left;display:inline;width:268px;float:left;position:relative;}
.group .hide{position:absolute;background:#000;padding:10px;bottom:0;left:0;width:248px;float:left;z-index:11;margin:1px;}
.hide{display:none;}
.loading{display:none;position:absolute;top:40%;left:48%;z-index:15;}
.loading img{border:0 !important;}

附件:下载该文件资源,减少时间成本(增值服务)