如何利用HTML、CSS如何实现的图片预览弹出层的好代码教程

互联网
西湖的风景是那样的雄伟壮观；湖水是那样清澈；是那样的平静，像一面镜子；湖边的景色是那样的美不胜收。

　　本篇效果利用HTML、CSS和Jq实现的图片点击预览功能，在预览时也可以点击切换图片。图片1为整体效果，图片2是点击图片1后出现被点击图片的预览图片的名称以及说明。

图片1

图片2

　　实现的代码：

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divid="ImageMain"><imgsrc="1img1.jpg"/><imgsrc="1img2.jpg"/><imgsrc="1img3.jpg"/><imgsrc="1img4.jpg"/><imgsrc="1img5.jpg"/><imgsrc="1img6.jpg"/></div>
  2. <divid="ImageScaBg"></div>
  3. <divid="ImageSca">
  4. <divid="ImageContainer">
  5. <imgid="imgCenter"src="1img3.jpg"/>
  6. <divid="imgLunbo"><imgclass="imgLunboItem"src="1img1.jpg"/></div>
  7. </div>
  8. <divid="ImageInfo">
  9. <h3id="imgName"></h3>
  10. <pid="imgInfo"></p>
  11. </div>
  12. </div>

　　css3代码：

CSS Code复制内容到剪贴板
  1. #ImageMain{
  2. width:630px;
  3. height:500px;
  4. margin:0auto;
  5. margin-top:100px;
  6. }
  7. #ImageMain>img{
  8. width:200px;
  9. height:200px;
  10. cursor:pointer;
  11. float:left;
  12. margin-left:10px;
  13. margin-top:10px;
  14. }
  15. #ImageMain>img:hover{
  16. opacity:0.8;
  17. }
  18. #ImageScaBg{
  19. position:fixed;
  20. background-color:#000;
  21. top:0px;
  22. left:0px;
  23. opacity:0.6;
  24. width:100%;
  25. height:100%;
  26. display:none;
  27. }
  28. #ImageSca{
  29. position:absolute;
  30. background-color:#333;
  31. border:1pxsolid#ccc;
  32. -webkit-border-radius:5px;
  33. -moz-border-radius:5px;
  34. border-radius:5px;
  35. display:none;
  36. }
  37. #ImageContainer{
  38. float:left;
  39. text-align:center;
  40. }
  42. #ImageInfo{
  43. float:left;
  44. width:300px;
  45. background-color:#fff;
  46. -webkit-border-radius:03px3px0;
  47. -moz-border-radius:03px3px0;
  48. border-radius:03px3px0;
  49. }
  50. #imgName{
  51. font:15px"微软雅黑",Arial,Helvetica,sans-serif;
  52. padding-left:10px;
  53. font-weight:500px;
  54. }
  55. #imgInfo{
  56. font:13px"微软雅黑",Arial,Helvetica,sans-serif;
  57. padding-left:10px;
  58. color:#808080;
  59. }
  60. #imgLunbo{
  61. height:80px;
  62. position:absolute;
  63. margin-left:50px;
  64. }
  65. .imgLunboItem{
  66. width:76px;
  67. height:76px;
  68. margin-left:10px;
  69. }

　　JQ的代码：

复制内容到剪贴板
  1. varImageScaHandler={
  2. ImageMaxWidth:800,
  3. ImageMaxHeight:600,
  4. ImagePathJson:[{imgName:"预览弹出层测试图片1",imgPath:"1img1.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
  5. {imgName:"预览弹出层测试图片2",imgPath:"1img2.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
  6. {imgName:"预览弹出层测试图片3",imgPath:"1img3.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
  7. {imgName:"预览弹出层测试图片4",imgPath:"1img4.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
  8. {imgName:"预览弹出层测试图片5",imgPath:"1img5.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
  9. {imgName:"预览弹出层测试图片6",imgPath:"1img6.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"}
  10. ],
  11. Init:function(){
  12. $("#ImageSca").css("width",ImageScaHandler.ImageMaxWidth200"px");
  13. $("#ImageSca").css("height",ImageScaHandler.ImageMaxHeight10"px");
  14. $("#ImageSca").css("top",($(window).height()-$("#ImageSca").height())/2"px");
  15. $("#ImageSca").css("left",($(window).width()-$("#ImageSca").width())/2"px");
  16. $("#ImageContainer").css("width",$("#ImageSca").width()-300"px").css("height",$("#ImageSca").height());
  17. $("#imgLunbo").css("width",$("#ImageSca").width()-300-100"px").css("top",$("#ImageSca").height()-90"px");
  18. $("#ImageInfo").css("height",$("#ImageSca").height());
  19. $("#ImageMain>img").click(function(){
  20. ImageScaHandler.ChangeImage($(this));
  21. });
  22. ImageScaHandler.GetImage();
  23. $("#ImageSca").click(function(event){
  24. event.stopPropagation();
  25. });
  26. $("#ImageScaBg").click(function(event){
  27. ImageScaHandler.Hide();
  28. });
  29. },
  30. Show:function(){
  31. $("#ImageSca").css("display","block");
  32. $("#ImageScaBg").css("display","block");
  33. },
  34. Hide:function(){
  35. $("#ImageSca").css("display","none");
  36. $("#ImageScaBg").css("display","none");
  37. },
  38. GetImage:function(){
  39. $("#imgLunbo").children().remove();
  40. for(vari=0;i<ImageScaHandler.ImagePathJson.length;i){
  41. varmImage=document.createElement("img");
  42. mImage.className="imgLunboItem";
  43. mImage.src=ImageScaHandler.ImagePathJson[i].imgPath;
  44. $("#imgLunbo").append(mImage);
  45. mImage.onclick=function(){
  46. $(".imgLunboItem").css("border","0pxsolid#000");
  47. ImageScaHandler.ChangeImage($(this));
  48. }
  49. }
  50. },
  51. ChangeImage:function(target){
  52. $("#ImageContainer>img").attr("src",$(target).attr("src"));
  53. $("#ImageContainer>img").css("margin-top",100"px");
  54. ImageScaHandler.Show();
  55. $(".imgLunboItem").css("border","0pxsolid#000");
  56. for(vari=0;i<ImageScaHandler.ImagePathJson.length;i){
  57. if(ImageScaHandler.ImagePathJson[i].imgPath==$(target).attr("src")){
  58. $("#imgName").html(ImageScaHandler.ImagePathJson[i].imgName);
  59. $("#imgInfo").html(ImageScaHandler.ImagePathJson[i].imgInfo);
  60. $($(".imgLunboItem")[i]).css("border","2pxsolid#efefef");
  61. }
  62. }
  63. }
  64. }

　以上就是利用HTML、CSS和Jq实现的图片点击预览功能，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例