JQuery实现无刷新页面:点击缩略图显示对应原图的效果

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-02-14 12:55:12
  • 点击:5426
[0分]

在前面提到了通过JQuery实现同一页面图片的前后切换浏览,但在平常网站建设中往往会需要先显示缩略图,然后通过用户点击对应的图片来动态显示相应的原图。这样做一方面可以减少对服务器的并发压力,另一方面也可以提高用户的浏览速度。先让大家看一下浏览效果吧(缩略图和原图不是一一对应的,只是随便找来作演示之用)!

打开演示地址

通过演示可以看到图片可以前后自由选择,并且选中的缩略图会变亮(其它默认是灰掉的,当然这个CSS滤镜只适合在IE内核的浏览器下运行)。另外,原图没有加载完成前会有一个动态的loading提示。其中,这个也是值得大家设计类似加载提示时的技巧(原理:预先加载一个loading图片,然后通过Jquery改变图片的src属性而最终实现此效果。)至于详细具体的说明,可以参考一下里面的源码。

<!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="description" content="56gee 39℃" /> 

<title>滚动图片浏览——56gee 39℃</title> 
<style type="text/css"> 
div, ul, li { 
 margin: 0px; 
 padding: 0px; 
 list-style-type: none; 
} 
#ShowArea { 
 height: 600px; 
 overflow-y: auto; 
} 
#SImgsList { 
 clear: both; 
 margin-right: auto; 
 margin-left: auto; 
 overflow: hidden; 
 margin-top: 8px; 
} 
.SImgs { 
 float: left; 
 overflow: hidden; 
} 
#SImgs { 
 overflow: hidden; 
 background-color: #e6ecf3; 
 padding-top: 5px; 
 padding-bottom: 5px; 
} 

#SImgs .img { 
 float: left; 
 width:156px; 
 border: 1px solid #CCC; 
 background-color: #FFF; 
 text-align: center; 
 margin-right: 3px; 
 margin-left: 3px; 
 padding: 3px; 
} 

#SImgsList img { 
 height: 104px; 
 cursor: pointer; 
} 
.Img_SBg { 
 background-image: url(../../images/Img_SBg.gif); 
 background-repeat: repeat-y; 
 width: 11px; 
 border: 1px solid #d2d2d2; 
 cursor: pointer; 
 float: left; 
} 
.Img_Sback { 
 background-image: url(../../images/Img_Sback.gif); 
 background-repeat: no-repeat; 
 background-position: center center; 
 height: 41px; 
 width: 11px; 
} 
.Img_Snext { 
 background-image: url(../../images/Img_Snext.gif); 
 background-repeat: no-repeat; 
 background-position: center center; 
 height: 41px; 
 width: 11px; 
} 

</style> 
</head> 
<script type="text/javascript" src="/js/jquery-1.5.min.js"></script> 
<script type="text/javascript"> 
var ArrTag = ’||’;//数组标识(可任意定义) 
var loadIco = "../demoImgs/loading.gif";//加载提示的图片路径 
var Conts = ’’; 
Conts += ’<DIV align=center><IMG src="http://pic.yupoo.com/56-gee/BFI8fvlP/2hTJS.jpg"></div>’ + ArrTag; 
Conts += ’<DIV align=center><IMG src="http://pic.yupoo.com/56-gee/BFI8eYou/mVEYp.jpg"></div>’ + ArrTag; 
Conts += ’<DIV align=center><IMG src="http://pic.yupoo.com/56-gee/BFpk1kz3/Sxoln.jpg"></div>’ + ArrTag; 
Conts += ’<DIV align=center><IMG src="http://pic.yupoo.com/56-gee/BF6xWjDo/zWEeZ.jpg"></div>’ + ArrTag; 
Conts += ’<DIV align=center><IMG src="http://pic.yupoo.com/56-gee/BFpdxrJX/s1ER1.jpg"></div>’; 
var ContsArray = Conts.split(ArrTag); 
var ImgsObj; 
var CurrTag = -1;//初始化当前图片 

$(document).ready(function(e) { 
 if($(’SImgsList’)){ 
   ImgsObj = $(’#SImgs img’); 
    
   CurrTag = 0;//默认第一个 
    
   var ImgsTotal = ImgsObj.length;//图片总数 
    
   var ImgsWidth = parseInt(ImgsObj.get(CurrTag).parentNode.offsetWidth) + parseInt(ImgsObj.parent().css("margin-right")) + parseInt(ImgsObj.parent().css("margin-left"));//每个图片所在区域的总宽度(这里可以根据实际样式的情况来计算总宽度) 
    
   var ImgsHeight = parseInt($(’#SImgs’).height()) + parseInt($(’#SImgs’).css("padding-top"))*2; 
    
   var ShowImgsNum = 3;//可见区域的图片数 
   if(ShowImgsNum>ContsArray.length){ShowImgsNum = ContsArray.length}; 
    
   var ShowWidth = ShowImgsNum * ImgsWidth; 
   $(’#SImgs’).parent().width(ShowWidth); 
   $(’#SImgsList’).width(ShowWidth + ($(’#Img_Sback’).width()+2)*2);//设置显示区域的宽度,其中+2是因为按钮左右两边的border=1 
    
   //设置向前向后按钮的垂直位置 
   var Img_STspace = (ImgsHeight - $(’#Img_Sback’).height())/2; 
   $(’#Img_Sback’).css(’margin-top’,Img_STspace); 
   $(’#Img_Snext’).css(’margin-top’,Img_STspace); 
    
   var FirstImgLeft = 0;//初始化第一张图片的左边位置 
   $(’#SImgs’).css("width",ImgsTotal*ImgsWidth); 
   $(’#SImgs’).css("margin-left",FirstImgLeft); 
 } 
 else{ 
  return false; 
 } 
  
 ImgsObj.each(function(i){ 
  $(this).css(’filter’,’Gray’);//将所有缩略图片灰掉 
  if(i==0){Img_Load(CurrTag);} 
  //============= 点击缩略图 ============== 
  $(this).click(function(){ 
   CurrTag = i; 
   Img_Load(CurrTag); 
  }); 
 }); 
  
  
 //============= 向左按钮(显示后面的) ============= 
 $(’#Img_Sback’).click(function(){ 
  if(FirstImgLeft<0){ 
    FirstImgLeft+= ImgsWidth; 
    $(’#SImgs’).css("margin-left",FirstImgLeft); 
  } 
 }); 
  
 //============= 向右按钮(显示前面的) ============= 
 $(’#Img_Snext’).click(function(){ 
  if(parseInt(ImgsTotal*ImgsWidth)-Math.abs(FirstImgLeft) > parseInt(ShowWidth)){ 
    FirstImgLeft-= ImgsWidth; 
    $(’#SImgs’).css("margin-left",FirstImgLeft); 
  } 
 }); 
  
//****************************************************************************** 
//******************************************************************************  
 //================= 图片加载 ================ 
 function Img_Load(tag){ 
  ImgsObj.css(’filter’,’Gray’);//将所有缩略图片灰掉 
  ImgsObj.get(tag).style.filter = ’’;//取消当前缩略图的滤镜(激活) 
  var tips = ContsArray[tag].replace(getImgSrc(ContsArray[tag]),loadIco);//用加载提示图片替换原有图片路径 
  var tipsY = 3;//$(’#ShowArea’).height()/2; 
  var objDIV = $(’<div/>’); 
  $(’<div/>’).css(’padding-top’,tipsY).html(tips).appendTo(objDIV); 
   
  $(’#ShowArea’).html(objDIV.html());//显示加载提示 
  $(’#ShowArea img’).attr(’src’,getImgSrc(ContsArray[tag]));//加载所需图片 
   
 } 
  
 //================= 获取图片路径(去除当中的单双引号) ================ 
 function getImgSrc(str){ 
   var imgRe = /<img.*?(?:>|\/>)/gi; 
   var arr = str.match(imgRe); 
   var imgArr = []; 
   var sreg = /src=[\’\"]?([^\’\"]*)[\’\"]?/; 
   for (var i = 0; i < 28; i++) { 
    var src = arr[i].match(sreg); 
    if (src[0]) { 
     return src[0].replace(/src/i, ’’).replace(’>’,’’).replace(’=’,’’).replace(/\’/g,’’).replace(/\"/g,’’); 
    } 
   } 
 } 
  
}); 
</script> 

<body> 
<div id="ShowArea"></div> 
<div id="SImgsList"> 
 <div class="Img_SBg" id="Img_Sback"><div class="Img_Sback"></div></div> 
    <div class="SImgs"> 
      <div id="SImgs"> 
        <div class="img"><IMG src="/demoImgs/20111231224915.jpg"></div> 
        <div class="img"><IMG src="/demoImgs/20111231225957.jpg"></div> 
        <div class="img"><IMG src="/demoImgs/20120104000514.jpg"></div> 
        <div class="img"><IMG src="/demoImgs/20120105123917.jpg"></div> 
        <div class="img"><IMG src="/demoImgs/20120106003500.jpg"></div> 
      </div> 
    </div> 
<div class="Img_SBg" id="Img_Snext"><div class="Img_Snext"></div></div> 
</div> 
</body> 
</html> 
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华