jQuery图片相册点击缩略图弹出大图预览特效

jQuery图片相册点击缩略图弹出大图预览特效是一款缩略图排列，鼠标点击小图的时候弹出层显示大图，带切换按钮与关闭按钮的js特效代码。

js代码
<script>
varimg_index=0;
varimg_src="";$(function(){
//计算居中位置
varmg_top=((parseInt($(window).height())-parseInt($(".photo-div").height()))/2);$(".photo-div").css({
"margin-top":""+mg_top+"px"
});
//关闭
$(".photo-close").click(function(){
$(".photo-mask").hide();
$(".photo-panel").hide();
});
//下一张
$(".photo-panel.photo-div.arrow-next").click(function(){
img_index++;
if(img_index>=$(".demoliimg").length){
img_index=0;
}
img_src=$(".demoliimg").eq(img_index).attr("src");
photoView($(".demoliimg"));
});
//上一张
$(".photo-panel.photo-div.arrow-prv").click(function(){
img_index--;
if(img_index<0){
img_index=$(".demoliimg").length-1;
}
img_src=$(".demoliimg").eq(img_index).attr("src");
photoView($(".demoliimg"));
});
//如何调用？
$(".demoliimg").click(function(){
$(".photo-mask").show();
$(".photo-panel").show();
img_src=$(this).attr("src");
img_index=$(this).index();
photoView($(this));
});});
//自适应预览
functionphotoView(obj){
if($(obj).width()>=$(obj).height()){
$(".photo-panel.photo-div.photo-img.photo-view-h").attr("class","photo-view-w");
$(".photo-panel.photo-div.photo-img.photo-view-wimg").attr("src",img_src);
}else{
$(".photo-panel.photo-div.photo-img.photo-view-w").attr("class","photo-view-h");
$(".photo-panel.photo-div.photo-img.photo-view-himg").attr("src",img_src);
}
//此处写调试日志
console.log(img_index);
}
</script>



下载

2023-11-23 00:43 上传

点击文件名下载附件
售价: 1 金币  [记录]  [购买]