jQuery+css实现的点击图片放大缩小预览功能示例

本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考，具体如下：

点击一张图片，图片就会放大，查看大图，点击空白处就会隐藏大图，回到缩略图。

主要是Jquery进行元素的显示与隐藏。

  
  
  
    *{
      margin:0;
      padding:0;
    }
    
    h1{
      text-align: center;
      margin:20px 0;
    }

    #imgdiv{
      width: 500px;
      margin:50px auto;
    }

    #imgdiv img{
      width: 300px;
      margin:0 100px;
    }

    #bigimg{
      width: 100%;
      height: 100%;
      position: fixed;
      background: rgba(0,0,0,.3);
      top: 0;
      display: none;
    }

    #bigimg img{
      width: 1000px;
      margin:auto;
      position: fixed;
      left:0;
      right:0;
      top: 80px;
      cursor: pointer;
    }
  


  图片预览 - 放大/缩小
  
  
    
  

  
  

demo

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。