對于網頁中的圖片進行連續放大（便于用戶清晰查看內容）、縮小，旋轉等操作，可以使用viewjs圖片查看器插件實現。

viewjs官方網址：

具體使用方法請參照網址說明。

下面做2個簡單的示例：

1、示例一：單一圖片

 1 !DOCTYPE html  2 html lang="zh"  4 head  5 meta charset="UTF-8" /  6 meta name="viewport" content="width=device-width, initial-scale=1.0" /  7 meta http-equiv="X-UA-Compatible" content="ie=edge" /  8 title 網頁中的圖片查看器viewjs使用 /title  9 !--請配置好css路徑-- 10 link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" / 11 style type="text/css" 12 * {13 margin: 0;14 padding: 0;16 img{17 border: 1px solid #009F95;19 /style 20 /head 22 body 23 div 24 img id="image" src="img/sj.jpg" alt="Picture" 25 /div 26 !--請配置好js路徑-- 27 script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8" /script 28 script type="text/javascript" 29 var viewer = new Viewer(document.getElementById('image'));30 /script 31 /body 33 /html 

?

效果：

（1）網頁顯示：

?

（2）點擊圖片后：

2、示例二：多個圖片同時展示

 1 !DOCTYPE html  2 html lang="zh"  4 head  5 meta charset="UTF-8" /  6 meta name="viewport" content="width=device-width, initial-scale=1.0" /  7 meta http-equiv="X-UA-Compatible" content="ie=edge" /  8 title 網頁中的圖片查看器viewjs使用 /title  9 !--請配置好css路徑-- 10 link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" / 11 style type="text/css" 12 * {13 margin: 0;14 padding: 0;17 img {18 border: 1px solid #009F95;20 /style 21 /head 23 body 24 div 25 !--可以對圖片樣式進行控制-- 26 ul id="images" 27 li img src="img/aaa.jpg" alt="Picture" /li 28 li img src="img/product4.png" alt="Picture 2" /li 29 li img src="img/sqbg-icon.png" alt="Picture 3" /li 30 /ul 31 /div 32 !--請配置好js路徑-- 33 script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8" /script 34 script type="text/javascript" 35 var viewer = new Viewer(document.getElementById('images'));36 /script 37 /body 39 /html 

（1）網頁展示效果（未對圖片進行樣式控制，頁面丑。）

?

（2）點擊任何一個圖片，可對圖片進行各種查看操作。

?

總結：viewjs插件可以對網頁中的圖片進行各種查看操作，尤其可以用于用戶想連續方法查看圖片等情景。其他viewjs的方法后續會

?

以上就是網頁中的圖片查看器viewjs使用的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。