html 进网页就弹出图片,利用HTML、CSS实现的图片预览弹出层的教程

var ImageScaHandler={         ImageMaxWidth:800,

ImageMaxHeight:600,         ImagePathJson:[{imgName:"预览弹出层测试图片1",imgPath:"1img1.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},

{imgName:"预览弹出层测试图片2",imgPath:"1img2.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},         {imgName:"预览弹出层测试图片3",imgPath:"1img3.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},

{imgName:"预览弹出层测试图片4",imgPath:"1img4.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},         {imgName:"预览弹出层测试图片5",imgPath:"1img5.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},

{imgName:"预览弹出层测试图片6",imgPath:"1img6.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"}         ],

Init:function(){             $("#ImageSca").css("width",ImageScaHandler.ImageMaxWidth 200 "px");

$("#ImageSca").css("height",ImageScaHandler.ImageMaxHeight 10 "px");             $("#ImageSca").css("top",($(window).height()-$("#ImageSca").height())/2 "px");

$("#ImageSca").css("left",($(window).width()-$("#ImageSca").width())/2 "px");             $("#ImageContainer").css("width",$("#ImageSca").width()-300 "px").css("height",$("#ImageSca").height());

$("#imgLunbo").css("width",$("#ImageSca").width()-300-100 "px").css("top",$("#ImageSca").height()-90 "px");             $("#ImageInfo").css("height",$("#ImageSca").height());

$("#ImageMain>img").click(function(){                 ImageScaHandler.ChangeImage($(this));

});                     ImageScaHandler.GetImage();

$("#ImageSca").click(function(event){                 event.stopPropagation();

});             $("#ImageScaBg").click(function(event){

ImageScaHandler.Hide();             });

},         Show:function(){

$("#ImageSca").css("display","block");             $("#ImageScaBg").css("display","block");

},         Hide:function(){

$("#ImageSca").css("display","none");             $("#ImageScaBg").css("display","none");

},         GetImage:function(){

$("#imgLunbo").children().remove();             for(var i=0;i

var mImage=document.createElement("img");                mImage.className="imgLunboItem";

mImage.src=ImageScaHandler.ImagePathJson.imgPath;                $("#imgLunbo").append(mImage);

mImage.οnclick=function(){                    $(".imgLunboItem").css("border","0px solid #000");

ImageScaHandler.ChangeImage($(this));                }

}         },

ChangeImage:function(target){                 $("#ImageContainer>img").attr("src",$(target).attr("src"));

$("#ImageContainer>img").css("margin-top",100 "px");                 ImageScaHandler.Show();

$(".imgLunboItem").css("border","0px solid #000");                 for(var i=0;i

if(ImageScaHandler.ImagePathJson.imgPath==$(target).attr("src")){                         $("#imgName").html(ImageScaHandler.ImagePathJson.imgName);

$("#imgInfo").html(ImageScaHandler.ImagePathJson.imgInfo);                         $($(".imgLunboItem")).css("border","2px solid #efefef");

}                 }

}     }