纯javascript的在线图片预览插件( viewer js )

weblog Md 845 0 0

【 viewer viewerjs viewer.js viewer-js 】

github地址:https://github.com/fengyuanchen/viewerjs

html文件引入两个文件viewer.jsviewer.css,这两个文件在项目的dist文件夹中。
例如:

<html>  
<head>  
<title>title</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link href="./viewer.css" rel="stylesheet">
</head> 
<body> 
<div>
  <ul id="images">
    <li><img src="./images/1.jpg" alt="Picture 1"></li>
    <li><img src="./images/1.jpg" alt="Picture 2"></li>
    <li><img src="./images/1.jpg" alt="Picture 3"></li>
  </ul>
</div>
</body> 
<script src="./viewer.js"></script>
<script>
    const gallery = new Viewer(document.getElementById('images'));
</script>
</html>

猜你喜欢
前端(h5) 1466 htmljs实现懒加载htmljs实现懒加载案例代码下载地址:http://www.jiajiajia.club/file/info/JA67P0
html图片懒加载 1291 js实现懒加载lazyLoading.html测试页面
前端,javascript 541 下方代码包括html,css,javascript。可直接复制到本地文测试。如果引用无法访问,请替换连接。 !DOCTYPEhtml htmllang="en" head
算法基础 1216 安装proto编译器参考:http://www.jiajiajia.club/blog/artical/351psy9r6l0g/464编写.proto文syntax="proto3
前端(h5) 2411 js生成二维码跳转链接!DOCTYPEhtmlhtmlhead!--引入jquery,jquery.qrcode--scripttype='text/javascript'src='http
算法基础 1721 装。下载node.js安装文,并安装:https://nodejs.org/en/npm包含node.js中。安装uglifyjs:npminstalluglify-js@2-g@2作用是指定下载
前端(h5) 3067 1.锚点定位很简单两行搞定:ahref="#anchorName"点击跳转到anchorName位置/aaname="anchorName"anchorName/a2.js代码实现,并带滑动效果
前端(h5) 1601 1.const定义变量不可以修改,而且必须初始化。script constb; //报错
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。