Jquery特效九:图片产品展示变换

来源：互联网发布：onlyanna淘宝店编辑：程序博客网时间：2024/04/28 04:06

效果图及代码如下：

<!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>
<title> Demo : Dev By CssRain.cn </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/cssreset.css" type="text/css"/>
<link rel="stylesheet" href="css/mycss.css" type="text/css"/>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
jQuery.fn.loadthumb = function(options) {
  options = $.extend({
    src : ""
  },options);
  var _self = this;
  _self.hide();
  var img = new Image();
  $(img).load(function(){
   _self.attr("src", options.src);
   _self.fadeIn("slow");
  }).attr("src", options.src); //.atte("src",options.src)要放在load后面，
  return _self;
}

$(function(){
   var i = 5; //已知显示的<a>元素的个数
   var m = 5; //用于计算的变量
      var $content = $("#myImagesSlideBox .scrollableDiv");
   var count = $content.find("a").length;//总共的<a>元素的个数
   //下一张
   $(".next").live("click",function(){
   var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
   if( !$scrollableDiv.is(":animated")){ //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
    if(m<count){ //判断 i 是否小于总的个数
     m++;
     $scrollableDiv.animate({left: "-=50px"}, 600);
    }
   }
   return false;
   });
    //上一张
   $(".prev").live("click",function(){
   var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
   if( !$scrollableDiv.is(":animated")){
    if(m>i){ //判断 i 是否小于总的个数
     m--;
     $scrollableDiv.animate({left: "+=50px"}, 600);
    }
   }
   return false;
   });

   $(".scrollableDiv a").live("click",function(){
   var src = $(this).find("img").attr("imgb");
   var bigimgSrc = $(this).find("img").attr("bigimg");
   $(this).parents(".myImagesSlideBox").find(".myImgs").loadthumb({src:src}).attr("bigimg",bigimgSrc);
   $(this).addClass("active").siblings().removeClass("active");
   return false;
   });
   $(".scrollableDiv a:nth-child(1)").trigger("click");

   $(".myTxts a").live("click",function(){
   var bigimgSrc =$(this).parents(".myImagesSlideBox").find(".myImgs").attr("bigimg");
   popZoom( bigimgSrc , "500" , "500");
   return false;
   });

  //以新窗口的方式打开图片
  var windowWidth =$(window).width();
  var windowHeight =$(window).height();
  function popZoom(pictURL, pWidth, pHeight) {
   var sWidth = windowWidth;
   var sHeight = windowHeight;
   var x1 = pWidth;
   var y1 = pHeight;
   var opts = "height=" + y1 + ",width=" + x1 + ",left=" + ((sWidth-x1)/2) +",top="+ ((sHeight-y1)/2)+",scrollbars=0,menubar=0";
   pZoom = window.open("","", opts);
   pZoom.document.open();
   pZoom.document.writeln("<html><body bgcolor=/"skyblue/"" +" onblur='self.close();' style='margin:0;padding:0;'>");
   pZoom.document.writeln("<img src=/"" + pictURL + "/" width=/"" +pWidth + "px/" height=/"" + pHeight + "px/">");
   pZoom.document.writeln("</body></html>");
   pZoom.document.close();
  }

  /*关闭遮罩层*/
  $(".closeMyDiv a").live("click",function(){
   $("#MyDiv").empty().hide();
   $("#BigDiv").hide();
   return false;
  }).focus(function(){
   $(this).blur();
   return false;
  });

  /*使用遮罩层*/
  $("#myImagesSlideBox .myImages img").click(function(){
   /*遮罩层居中和宽度高度设置 */
   $("#BigDiv").css({
      width: $("body").width() ,
      height: (   $("body").height() > $("html").height() ) ? $("body").height() : $("html").height()
     });
   $("#MyDiv").css({left: (($(window).width()-300)/2) ,top: (($(window).height()-390)/2) });

   var $myDiv = $("#MyDiv").html( $("#myImagesSlideBox").html() ).show();
   $('<div class="closeMyDiv"><a href="#">关闭</a></div>').prependTo( $myDiv );
   $("#BigDiv").show();
   return false;
  });
})
</script>

</head>
<body>
<div style="margin:20px auto;width:400px;">

<div id="myImagesSlideBox" class="myImagesSlideBox">
   <div class="myImages">
   <img src="images/d3.jpg" class="myImgs" bigimg="images/bigimges_01.jpg" >
   </div>
   <div class="myTxts" >
   <a href="#">在新窗口查看大图.</a>
   </div>
   <div id="scrollable">
   <a class="prev" href="#" title="上一张"></a>
   <div class="items" >
    <div class="scrollableDiv">
     <a><img src="images/d1-small.jpg" imgb="images/d1.jpg" bigimg="images/bigimges_01.jpg" ></a>
     <a><img src="images/d2-small2.jpg" imgb="images/d2-0000.jpg" bigimg="images/bigimges_01.jpg" ></a>
     <a><img src="images/small3.jpg" imgb="images/d3.jpg" bigimg="images/bigimges_02.jpg"></a>

<br clear="all"/>
<p>程序介绍：</p>
<p>1，点击大图可以弹出遮罩效果.</p>
<p>2，下方小图可以左右滚动.</p>
<p>3，点击新窗口打开，可以打开当前的大图片.</p>
<p>4，遮罩层中小图也可以左右滚动，也可以打开大图片.</p>
<br clear="all"/>
<p>在 IE6,IE7,Firefox3 & google 浏览器下测试通过.</p>
<br clear="all"/>
<p>Dev By <a href="http://www.cssrain.cn" >CssRain.cn</a></p>

<div id="BigDiv" ></div>
<div id="MyDiv" class="myImagesSlideBox"></div>
</div>
</body>
</html>