<!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> 仿QQ相册 </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="jquery-1.3.2.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>
<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> </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>
一个模仿QQ相册效果演示
4星 · 超过85%的资源 需积分: 9 163 浏览量
2009-09-14
10:31:29
上传
评论 1
收藏 277KB RAR 举报 
QQ相册演示.rar （19个子文件） 
QQ相册演示 css 
right.png 946B
mycss.css 2KB cssreset.css 862B left.png 906B dots.png 412B jquery-1.3.2.js 118KB
demos.html 6KB images 
d2-small2.jpg 1KB d2-0000.jpg 14KB bigimges_01.jpg 105KB go_up.jpg 953B d3.jpg 13KB bigimges_02.jpg 104KB go_down.jpg 929B
loading.gif 2KB Thumbs.db 22KB d1-small.jpg 1KB d1.jpg 14KB small3.jpg 1KB资源评论
yanglijuan1232012-06-21效果不错，可是我想要的是另一种形式，类似于QQ空间里面的那个图片预览的
u0103023402013-11-21挺好的，不过浏览器兼容性不好- kql3762013-07-23效果不错，不过不是我想要的那种效果
hawk00352018-02-22随便看看，感谢分享
baoping19862012-10-11不怎么好用
