今天农成给大家分享一个比较好用的插件，点击图片全屏放大的jquery插件。
http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-lightbox-image.html
这个是官方网站，很小而且很实用的一个插件。下载的包后面农成如果有时间就会上传，没有的话，大家可以到刚刚我给大家的网站上面自己去下载。补上下载链接：点击下载 预览
其实这个是很简单一个东西，所以农成就结合代码来给大家解释解释他的使用吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="imgbox.css" /> 注意，这里十分重要，因为这个css文件是放大之后必须使用到的，所以是十分的重要，大神如果有时间想重写一下这个css文件也是可以的，菜鸟的话，就直接使用吧。
</head>
<body>
<a id="test" title="" href="images/test.jpg">
<img style="width: 100px;height: 50px" src="images/test.jpg" />
</a>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.imgbox.js"></script>
<script>
$(function(){
$("#test").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>
</html>
然后，农成把官网的参数撸过来了，我就给大家翻译一下，以后方便扩展的时候使用。
| padding | Padding around full image 是不是全屏覆盖 |
| alignment | Position of the full image in the client, either ‘auto’ or ‘center’. By default it expands equally in all directions from the thumbnail在客户端中的完整图像的位置，无论是“自动”或“中心”。默认情况下，它在所有方向上的缩略图一样扩大。只有两个选项：auto或者center |
| allowMultiple | Allow more than one popup to be open at the same time 允许多个窗口同时打开 |
| autoScale | If true, images are scaled to fit in viewport如果是真的，图像缩放视口 |
| speedIn | Speed in milliseconds of the zooming-in animation (fading if set to 0)以毫秒为单位的动画的缩放速度放大 默认设置为0） |
| speedOut | Speed in milliseconds of the zooming-out animation (fading if set to 0)以毫秒为单位的动画的缩放速度关闭 默认设置为0） |
| easingIn, easingOut | Easing used for animations用于动画的宽松 |
| zoomOpacity | If true, changes image transparency when zooming如果是真的，当缩放时改变图像的透明度 |
| overlayShow | If true, shows the overlay (false by default) Overlay color is defined in CSS file如果是真的，显示了叠加（默认假） 覆盖的颜色定义在CSS文件 |
| overlayOpacity | Opacity of overlay (from 0 to 1)
覆盖的不透明度（从0到1） |
| hideOnOverlayClick | Hides popup when clicked on overlay
隐藏弹出时，点击覆盖 |
| hideOnContentClick | Hides popup when clicked on full image隐藏弹出时，点击图像 |
未经允许不得转载：微信信息发源地 » 农成学前端-点击图片全屏显示
图片社交，创业的下一个路口
评论前必须登录！
登陆 注册