magnify.js 介绍
magnify.js是一款jquery 图片 查看 插件 。magnify.js 插件 以light Box 的方式来展示 图片 ,并且light Box 窗口可以自由的拖动, 图片 可以缩放,旋转,最大化等, 功能 非常强大。?
magnify.js特点?
light Box 模态窗口可以自由拖动, 修改 尺寸和全屏最大化。
可以使用鼠标来移动 图片 进行查看。
可以使用鼠标或 功能 按钮来缩放 图片 。
图片 可以进行旋转。
支持 键盘 控制。
响应式设计。
magnify.js使用
1、引入
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>
2、html
<img data-magnify=" gal lery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify=" gal lery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify=" gal lery" data-src="big-3.jpg" src="small-3.jpg">
3、初始化
$("[data-magnify= gal lery]").magnify();
data-* 属性 说明:
data-src:该 属性 是大图的 URL地址 。?
data-caption:该 属性 用于 显示 图片 的 标题 。?
data-group:该 属性 用于对 图片 进行分组。
网站地址 : https://nzbin.github.io/magnify/
GitHub: https://github.com/nzbin/magnify
网站描述: 一款jquery 图片 查看 插件
magnify.js官方网站
官方网站: https://nzbin.github.io/magnify/
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。