mui 图片预览

一、前言

  我们在做移动端的时候,可以会遇见上传图片并且查看图片的内容。如果不想自己实现的话,可以使用 mui 自带的 zoom .js previewimage.js 完成该项工作。

二、开发环境

  开发工具:HBuilder

  使用框架:mui

  技       术:js + html 

  Github 项目:https://github.com/gzbitzxx/view.git

三、代码

  重点代码展示,黄色代表必须要。

DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>有趣测试title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/mui.imageviewer.css" />
    head>

    <body>

        
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">测试图片预览h1>
        header>
        
        <img src="images/img1.jpg" data-preview-src="" data-preview-group="1" />
        <img src="images/img2.jpg" data-preview-src="" data-preview-group="1" />
        <img src="images/img3.jpg" data-preview-src="" data-preview-group="1" />

        <script src="js/mui.min.js">script>
        <script src="js/mui.zoom.js">script>
        <script src="js/mui.previewimage.js">script>
        <script type="text/javascript" charset="utf-8">
            mui.previewImage();
        script>
    body>

html>

四、效果展示

  这是我自己做出来 Dome 的效果展示,有需要的自己 Github 下载。

mui 图片预览_第1张图片

代码我上传到了 Github 有需要的自己下载。

你可能感兴趣的:(mui 图片预览)