viewer.js是一个强大的基于jQuery的图像查看插件(支持旋转、缩放等)，功能超级超级全。

viewer.js的强大功能如下所示：

支持移动设备触摸事件

支持响应式

支持放大/缩小

支持旋转（类似微博的图片旋转）

支持水平/垂直翻转

支持图片移动

支持键盘

支持全屏幻灯片模式（可做屏保）

支持缩略图

支持标题显示

支持多种自定义事件

使用方法：

//引入css和js

<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/viewer/viewer.css') }}"/>

<script src="{{ URL::asset('assets/viewer/viewer.js') }}"></script>

<script src="{{ URL::asset('assets/viewer/jquery-viewer.js') }}"></script>

//初始化页面

<div id="lists" class="preview">

    @forelse ($list as $v)

    <p style="font-weight:bold;">{{ $v->title??'' }}</p>

      {!! $v['content']??'' !!}

      &nbsp;&nbsp;{{ $v->created_at??'' }}

    </p>

      <hr>

    @empty

    <p>无数据</p>

    @endforelse  

</div>

<script>

//删除原预览对象

function destroyViewer() {

    $(".preview").viewer("destroy");

}

//初始化预览

function initViewer() {

    $(".preview").viewer();

}

initViewer();//页面第一次初始化预览

</script>

$.ajax({

            type: 'Get',

            url: '/me/get_outline_content/{{ $outline->id??''}}',

            dataType: 'json',

            data: {

              page: page,

              keyword: $('#keyword').val()

            },

            success: function (res) {

              var arrLen = res.data.length;

              if (arrLen > 0) {

                for (var i = 0; i < arrLen; i++) {

                  result += res.data[i].content;

                }

                $('#lists').append(result);

                destroyViewer();//动态加载完成后销毁原对象

                setTimeout(initViewer, 1500);//重新生成预览对象，延迟是为了图片加载成功

              }

            },

            error: function (xhr, type) {

            }

});

声明：本文内容版权归原作者所有，未经授权，禁止转载！

声明：本站仅提供内容存储、展示服务，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的虚假信息，谨防诈骗。如发现有害或侵权内容，可联系本站删除！