溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求分析：
對于網頁中的圖片進行連續放大（便于用戶清晰查看內容）、縮小，旋轉等操作，可以使用viewjs圖片查看器插件實現。
viewjs官方網址：https://github.com/fengyuanchen/viewerjs
具體使用方法請參照官網說明。
下面做2個簡單的示例：
1、示例一：單一圖片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>網頁中的圖片查看器viewjs使用</title>
<!--請配置好css路徑-->
<link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" rel="external nofollow" rel="external nofollow" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img{
border: 1px solid #009F95;
}
</style>
</head>
<body>
<div>
<img id="image" src="img/sj.jpg" alt="Picture">
</div>
<!--請配置好js路徑-->
<script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var viewer = new Viewer(document.getElementById('image'));
</script>
</body>
</html>
效果：
（1）網頁顯示：
（2）點擊圖片后：
2、示例二：多個圖片同時展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>網頁中的圖片查看器viewjs使用</title>
<!--請配置好css路徑-->
<link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" rel="external nofollow" rel="external nofollow" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 1px solid #009F95;
}
</style>
</head>
<body>
<div>
<!--可以對圖片樣式進行控制-->
<ul id="images">
<li><img src="img/aaa.jpg" alt="Picture"></li>
<li><img src="img/product4.jpg" alt="Picture 2"></li>
<li><img src="img/sqbg-icon.jpg" alt="Picture 3"></li>
</ul>
</div>
<!--請配置好js路徑-->
<script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var viewer = new Viewer(document.getElementById('images'));
</script>
</body>
</html>
（1）網頁展示效果（未對圖片進行樣式控制，頁面丑。）
（2）點擊任何一個圖片，可對圖片進行各種查看操作。
總結：viewjs插件可以對網頁中的圖片進行各種查看操作，尤其可以用于用戶想連續方法查看圖片等情景。其他viewjs的方法后續會
以上這篇網頁中的圖片查看器viewjs使用方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
