效果图及代码如下:
<!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/"" +" οnblur='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>
<a><img src="images/d1-small.jpg" imgb="images/d1.jpg" bigimg="images/bigimges_02.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_01.jpg"></a>
<a><img src="images/d1-small.jpg" imgb="images/d1.jpg" bigimg="images/bigimges_02.jpg"></a>
<a><img src="images/d2-small2.jpg" imgb="images/d2-0000.jpg" bigimg="images/bigimges_02.jpg"></a>
<a><img src="images/small3.jpg" imgb="images/d3.jpg" bigimg="images/bigimges_01.jpg"></a>
</div>
<br clear="all"/>
</div>
<a class="next" href="#" title="下一张"></a>
</div>
</div>
<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>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--遮罩层和弹出div-->
<div id="BigDiv" ></div>
<div id="MyDiv" class="myImagesSlideBox"></div>
</div>
</body>
</html>