农成学前端-点击图片全屏显示-微信信息发源地

农成学前端-点击图片全屏显示

今天农成给大家分享一个比较好用的插件,点击图片全屏放大的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隐藏弹出时,点击图像

未经允许不得转载:微信信息发源地 » 农成学前端-点击图片全屏显示

赞 (2)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册