Requirements Analysis:
You can use the Viewjs picture Viewer plug-in to zoom in and out of images in a Web page (to make it easier for users to see content clearly), zoom out, rotate, and more.
VIEWJS Official website: https://github.com/fengyuanchen/viewerjs
Please refer to the official website for details of use.
Here are 2 simple examples:
1. Example one: Single image
1 <!DOCTYPE HTML>2 <HTMLLang= "zh">3 4 <Head>5 <MetaCharSet= "UTF-8" />6 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" />7 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" />8 <title>The picture Viewer viewjs in the Web page uses</title>9 <!--please configure CSS path. -Ten <Linkrel= "stylesheet"type= "Text/css"href= "Viewjs/viewer.min.css" /> One <styletype= "Text/css"> A * { - margin:0; - padding:0; the } - img{ - Border:1px solid #009F95; - } + </style> - </Head> + A <Body> at <Div> - <imgID= "image"src= "Img/sj.jpg"alt= "Picture"> - </Div> - <!--Please configure the JS path. - - <Scriptsrc= "Viewjs/viewer.min.js"type= "Text/javascript"CharSet= "Utf-8"></Script> - <Scripttype= "Text/javascript"> in varViewer= NewViewer (document.getElementById ('Image')); - </Script> to </Body> + - </HTML>
Effect:
(1) page display:
(2) After clicking on the image:
2, example two: multiple pictures at the same time show
1 <!DOCTYPE HTML>2 <HTMLLang= "zh">3 4 <Head>5 <MetaCharSet= "UTF-8" />6 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" />7 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" />8 <title>The picture Viewer viewjs in the Web page uses</title>9 <!--please configure CSS path. -Ten <Linkrel= "stylesheet"type= "Text/css"href= "Viewjs/viewer.min.css" /> One <styletype= "Text/css"> A * { - margin:0; - padding:0; the } - - img{ - Border:1px solid #009F95; + } - </style> + </Head> A at <Body> - <Div> - <!--you can control the style of the picture - - <ulID= "Images"> - <Li><imgsrc= "Img/aaa.jpg"alt= "Picture"></Li> - <Li><imgsrc= "Img/product4.png"alt= "Picture 2"></Li> in <Li><imgsrc= "Img/sqbg-icon.png"alt= "Picture 3"></Li> - </ul> to </Div> + <!--Please configure the JS path. - - <Scriptsrc= "Viewjs/viewer.min.js"type= "Text/javascript"CharSet= "Utf-8"></Script> the <Scripttype= "Text/javascript"> * varViewer= NewViewer (document.getElementById ('Images')); $ </Script>Panax Notoginseng </Body> - the </HTML>
(1) Web page display effect (no style control of the picture, the page is ugly.) )
(2) Click on any of the pictures, you can do a variety of viewing operations.
Summary: TheViewjs plugin can perform various viewing of images in a Web page, especially for scenarios where users want to view pictures in a continuous way. Follow-up of other viewjs methods
The picture Viewer viewjs in the Web page uses