2. 程式人生 > >手把手教小白如何用css+js實現頁面中圖片放大展示效果

手把手教小白如何用css+js實現頁面中圖片放大展示效果

阿新 • • 發佈：2019-01-03

1.前言
很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我教你！
2.詳情
說太多也沒有用，直接貼上程式碼。新手小白，可以直接複製程式碼到本地執行。需要注意一下幾點

  1. 將程式碼中的jquery.js的庫檔案連結改成自己的路徑
  2. .將圖片也改成自己的路徑與相應的圖片
    好了，直接上程式碼，一目瞭然：
<!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.前言 很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我

用wow.js實現頁面滾動時觸發animate.css動畫特效

偏移量 true fin 滾動 cdn lock src 代碼 splay 　　　　很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。 有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個

用css巧妙實現移動端橫向滑動展示功能

公司需要做一個手機橫向滑動的效果，不想用js外掛，太麻煩，匯入程式碼也多。所以去網上找了一下，用css就能實現，挺方便的。主要利用了display:-webkit-box來實現。 <!DOCTYPE html> <html> <head> <ti

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

JS實現定時操作 圖片輪播效果（setInterval）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=functi

原生js實現淘寶圖片放大功能

目錄結構：HTML:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

原生JS實現滑鼠懸停圖片顯示文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

js實現頁面中的拖拽運動

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"

原生JS判斷頁面中圖片載入完成

自己寫的判斷頁面中圖片載入完成的方法，用原生JS完成，不用jq主要考慮在不載入jq的情況下，程式碼可以正常執行 判斷指定ID的盒子中所有圖片載入，demo程式碼如下： <!DOCTYPE HTML> <html> <head> &l

用html+css+js實現中國象棋小遊戲開發專案

var game={ RN:10,//行數 CN:9,//列數 CSIZE:40,//每個單元格大小 OFFSET:20,//單元格區域距離最外層邊界的距離， URL:"images/chess.png",//儲存所有棋子的圖片地址 data:null,//實時儲存棋盤中棋子的物件 chessP

適合小白用的css幾種睡在中間（居中）的方式！！！

HTML css css3. javascript 初學者 平常小白最討厭的事情就是css為什麽沒有辦法居中，現在小狐貍為大家整理幾種方式，請廣大人民群眾笑納！！！ 吐舌頭 1水平居中1.1 內聯元素水平居中利用 text-align: center 可以實現在塊級元素內部的內聯元素水平居

適合小白用的css幾種睡在中間的方式！！！

css html h5 js 平常小白最討厭的事情就是css為什麽沒有辦法居中，現在小狐貍為大家整理幾種方式，請廣大人民群眾笑納！！！ 吐舌頭 1水平居中 1.1 內聯元素水平居中 利用 text-align: center 可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素(inli

菜鳥小白使用node.js搭建簡單伺服器（可請求圖片,html,js,css,json等檔案）

使用node.js搭建簡單伺服器 前言：以下步驟在安裝好node的環境前提下進行，未安裝者請先安裝好node，再嘗試 注：如若以下程式碼存在錯誤，歡迎讀者指出 搭建步驟如下： 一、建立server.js(主要用於搭建伺服器的檔案) const ht

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

用wow.js實現滾動頁面時觸發CSS 動畫效果的外掛

有的頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。如果你希望你的頁面也更加有趣，那麼你可以試試 WOW.js。 WOW.js 依賴 animate.css，所以它支援 animate.css 多達 60 多種的動畫效果，能滿足您的各

小白成長記-----python實現註冊的小程序

passwd 提示 信息 文件中 寫到 參考 超過 不能 全部 # 3、寫一個註冊的程序，輸入username，密碼，# 密碼確認，輸入的賬號和密碼不能為空，兩次輸入密碼必須一致，# 用戶名不能重復，錯誤次數四次 。註冊成功提示成功# 把註冊賬號密碼信息的寫到文件裏頭use

用原生js實現ajax、jsonp

原生js 斜杠 lang settime 發送數據 tro upper 類型 之前 一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy

小白學習node.js的記錄

com技術 事件 事件驅動 oob 性能 小白 文件讀取 ref hat 本人對於node.js一無所知，純純的小白一枚，想學習的初衷是了解node.js是什麽，能用它幹點什麽，說白就是好奇心使然吧。接下來記錄自己的學習過程。 註：若有錯誤歡迎指出，

用js實現頁面跳轉的幾種方式

head 註意 ont rem text pla http bsp cat 通過js或者html或者PHP等動態程序都可以方便的實現跳轉，這裏搜集了幾種頁面跳轉的方式js方式的頁面跳轉1.window.location.href方式 <script langua

js+css jQuery實現頁面後退執行 & 遮罩彈框

cti nload col 復制 ali 我不 彈框 clas 統計 JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script typ