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>1</td>
      
                <td><img class="zoom-in" src="../images/login-bg1.png" /></td>
      
                <td>点击图片可放大</td>
      
            </tr>
      
            <tr>
      
                <td>2</td>
      
                <td><img class="zoom-in" src="../images/login-bg2.png" /></td>
      
                <td>点击图片可放大</td>
      
            </tr>
      
            <tr>
      
                <td>2</td>
      
                <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(
      
                "<div class='bg-img'>"
      
                + "<div class='tra-img'>"
      
                    + "<img src='" + img_content + "' class='zoom-out'>"
      
                + "</div></div>"
      
            );
      
            //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. 图片展示

　　2.效果图

4.总结

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

手把手教小白如何用css+js实现页面中图片放大展示效果的更多相关文章

  1. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  2. 菜鸟-手把手教你把Acegi应用到实际项目中(8)-扩展UserDetailsService接口

    一个能为DaoAuthenticationProvider提供存取认证库的的类,它必须要实现UserDetailsService接口: public UserDetails loadUserByUse ...

  3. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  4. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  5. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  6. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  7. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  8. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  9. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

随机推荐

  1. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  2. 一篇文章带你快速入门createjs

    开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看.   createjs简介 官网:http://www.createjs.cc/ createjs中包 ...

  3. phpcms v9 调用自定义字段多图片的第一张或第N张图为缩略图

    1.打开相应要使用组图的模型的组图字段,添加组图 字段提示为 <div class="content_attr"> <label><input typ ...

  4. 关于cas-client单点登录客户端拦截请求和忽略/排除不需要拦截的请求URL的问题（不需要修改任何代码，只需要一个配置）

    前言:今天在网上无意间看到cas单点登录排除请求的问题,发现很多人在讨论如何通过改写AuthenticationFilter类来实现忽略/排除请求URL的功能:突发奇想搜了一下,还真蛮多人都是这么干的 ...

  5. 一起学习c++11——c++11中的新语法

    c++11新语法1: auto关键字 c++11 添加的最有用的一个特性应该就是auto关键字. 不知道大家有没有写过这样的代码: std::map<std::string, std::vect ...

  6. XMLHttpRequest函数封装

    XMLHttpRequest函数封装: function ajax(Url,sccuessFn,failureFn) { //1.创建XMLHttpRequest对象 var xhr = null; ...

  7. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

    在上一篇随笔中,我们已经看了如何实现前台的对话功能:前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件:当然,前台也应该实现这种效果,但原理懂了,可 ...

  8. Java基础(3) -字符串

    字符串-String 1.定义&&初始化 使用双引号把字符括起来 String str = "test"; 2.字符串的提取-substring String a ...

  9. AJAX学习笔记（一）基础知识

    一.HTTP协议 1.HTTP: 计算机通过网络进行通讯的规则,用于浏览器向服务器发送请求. 2.HTTP是一种无状态的协议,无状态是指服务器端不保留任何连接相关的信息,浏览器客户端向服务器发送请求, ...

  10. 【SEO】搜索引擎优化的陷阱和作弊

    一.认识SEO [理解] 站内优化是指更改网站内部结构,让网站利于蜘蛛爬取,比如网站内容: 站外优化是指发反向链接,给蜘蛛一个爬取你网站的通道. 其中,反向链接是指网页A 上有一个链接指向网页B,则网 ...