<强>需求分析:
对于网页中的图片进行连续放大(便于用户清晰查看内容),缩小,旋转等操作,可以使用viewjs图片查看器插件实现。
viewjs官方网址:https://github.com/fengyuanchen/viewerjs
具体使用方法请参照官网说明。
& lt; !DOCTYPE html>
& lt; html lang=皕h型”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”/比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”/比;
& lt; title>网页中的图片查看器viewjs使用& lt;/title>
& lt; !——请配置好css路径——比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/viewjs/viewer.min.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”/比;
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
img {
边界:1 px固体# 009 f95;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
& lt; img id="图像" src=" https://www.yisu.com/zixun/img/sj.jpg " alt=巴计北?
& lt;/div>
& lt; !——请配置好js路径——比;
& lt;脚本src=" https://www.yisu.com/zixun/viewjs/viewer.min.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
观众var=new viewer (. getelementbyid('图像'));
& lt;/script>
& lt;/body>
& lt;/html>
<强>(1)网页显示:
<强>(2)点击图片后:
& lt; !DOCTYPE html>
& lt; html lang=皕h型”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”/比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”/比;
& lt; title>网页中的图片查看器viewjs使用& lt;/title>
& lt; !——请配置好css路径——比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/viewjs/viewer.min.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”/比;
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
img {
边界:1 px固体# 009 f95;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
& lt; !——可以对图片样式进行控制——比;
& lt; ul id=巴枷瘛北?
& lt; li> & lt; img src=" https://www.yisu.com/zixun/img/aaa.jpg " alt=巴计弊４? lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/img/product4.jpg " alt=巴?”祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/img/sqbg-icon.jpg " alt=巴计?”祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt; !——请配置好js路径——比;
& lt;脚本src=" https://www.yisu.com/zixun/viewjs/viewer.min.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
观众var=new viewer (. getelementbyid('图像'));
& lt;/script>
& lt;/body>
& lt;/html>
(1)网页展示效果(未对图片进行样式控制,页面丑。)
(2)点击任何一个图片,可对图片进行各种查看操作。
以上这篇网页中的图片查看器viewjs使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
