viewer.js插件简单使用说明

不需要依赖jQuery.js，只需要导入viewer.js和viewer.css文件即可。

插件GitHub地址：https://github.com/fengyuanchen/viewerjs

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果</title><link rel="stylesheet" href="css/viewer.min.css"><style>* { margin: 0; padding: 0;}#sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}#sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}#sucaihuo li img { width: 100%;}#sucaihuo2 { width: 700px; margin: 0 auto; font-size: 0;}#sucaihuo2 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}#sucaihuo2 li img { width: 100%;}</style></head><body><h1>默认效果</h1><h3>图片异源</h3><!-- 展示和弹出图片源异源 --><ul id="sucaihuo"><li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li><li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li><li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li><li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li><li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li><li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li></ul><br/><br/><br/><h3>图片同源</h3><!-- 展示和弹出图片源同源 --><ul id="sucaihuo2"><li><img src="img/tibet-1.jpg" alt="图片1"></li><li><img src="img/tibet-2.jpg" alt="图片2"></li><li><img src="img/tibet-3.jpg" alt="图片3"></li><li><img src="img/tibet-4.jpg" alt="图片4"></li><li><img src="img/tibet-5.jpg" alt="图片5"></li><li><img src="img/tibet-6.jpg" alt="图片6"></li></ul></body><script src="js/viewer.min.js"></script><!-- <script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>--><script>var viewer = new Viewer(document.getElementById('sucaihuo'), {url: 'data-original'});var viewer2 = new Viewer(document.getElementById('sucaihuo2'));</script>
</html>

viewer.js插件简单使用说明相关推荐

关于viewer.js插件js版鼠标滚动事件放大缩小改为图片移动
主要是为了记录下需求中解决问题的思路,本人前端相当糟糕. 问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,j ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...
jQuery 版本viewer.js插件的结构分析与学习
viewer.js,其调用方法和使用都很简单.但是开始的时候对于其内部方法的调用,图片更新,插件冲突控制等原理都不是很理解.在这里分析一下viewer.js的框架,和大部分jQuery插件的封装类似, ...
html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略 ...
viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果
vue实现波纹效果 Vue-Rippler (vue-rippler) Simple Vue.js plugin for custom ripple effect. 简单的Vue.js插件可实现自定义 ...
原生js实现日期选择器插件简单风格日期选择插件
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介通过原生HTML/CSS/JavaScript完成一个日期选择器. 代码如下: ** <!-- 时间:202 ...

viewer.js插件简单使用说明

viewer.js插件简单使用说明相关推荐

最新文章

热门文章