手把手教小白如何用css+js实现页面中图片放大展示效果

1.前言 
     很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀,来来来,我教你! 
2.详情 
    说太多也没有用,直接贴上代码。新手小白,可以直接复制代码到本地运行。需要注意一下几点

    1. 将代码中的jquery.js的库文件链接改成自己的路径
    2. 将图片也改成自己的路径与相应的图片 
    3. 好了,直接上代码,一目了然:
    4. DOCTYPE html>
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>图片放大title>
          <style>
              table tr td img{width:60px;}
              table tr td{text-align:center; padding:5px;}
              table tr th{background:#ddd; height:36px; }
              table tr td{border-bottom:1px solid #ddd; border-left:1px solid #ddd; }
              table tr td:last-child{border-right:1px solid #ddd;}
              .bg-img{position: fixed;background-color:rgba(190,190,190,0.5);z-index:9999;}
              .tra-img{text-align:center;position:relative;top:50%;
                  -webkit-transform:translateY(-50%);
                  -moz-transform:translateY(-50%);
                  -o-transform:translateY(-50%);
                  -ms-transform:translateY(-50%);
                  transform:translateY(-50%);
              }
              .zoom-in{
                  cursor: -moz-zoom-in;
                  cursor: -webkit-zoom-in;            
                  cursor: zoom-in;
                  cursor: url(../images/big.cur);
              }
              .zoom-out{
                  cursor: -moz-zoom-out;
                  cursor: -webkit-zoom-out;
                  cursor: zoom-out;
                  cursor: url(../images/small.cur);
              }
          style>
      head>
      <body>
          <table cellpadding="0" cellspacing="0" width="700">
              <thead>
                  <tr>
                      <th>序号th><th>图片th><th>说明th>
                  tr>
              thead>
              <tbody>
                  <tr>
                      <td>1td>
                      <td><img class="zoom-in" src="../images/login-bg1.png" />td>
                      <td>点击图片可放大td>
                  tr>
                  <tr>
                      <td>2td>
                      <td><img class="zoom-in" src="../images/login-bg2.png" />td>
                      <td>点击图片可放大td>
                  tr>
                  <tr>
                      <td>2td>
                      <td><img class="zoom-in" src="../images/login-bg3.png" />td>
                      <td>点击图片可放大td>
                  tr>
              tbody>
          table>   
          <script src="../common/jquery.min.js">script>
          <script>
              //点击图片放大
              $(document).on("click", "table tr td img", function () {
                  var img_content = $(this).attr("src");
                  $("body").append(
                      "
      " + "
      " + "" + "
      " ); //bottom:'0',left:'0';会让图片从页面左下放出现,如果想从左上方出现,将bottom:'0'改成top:'0'; $(".bg-img").animate({ width: "100%", height: "100%", bottom: "0", left: "0", }, "normal") }) //点击外层区域页面图片隐藏 $(document).on("click", ".bg-img", function () { $(this).remove(); }) script> body> html>

 

3.实现效果

  1. 图片展示

手把手教小白如何用css+js实现页面中图片放大展示效果_第1张图片

  2.效果图

手把手教小白如何用css+js实现页面中图片放大展示效果_第2张图片

4.总结

      大家在浏览器中执行的时候,会看到相应的效果,如果是低版本的浏览器,包括iE11及以下的浏览器,可以自己下载两个文件就是放大镜和放小镜的cur文件。这样的话用户体验会更好! 如果有更好的方法,请告诉我!

 

你可能感兴趣的:(手把手教小白如何用css+js实现页面中图片放大展示效果)