jQuery插件——imgbox(点击图片查看大图)
需要的资源:
需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载。对应的资源如下,将资源引入页面(别忘了JQuery):
注意:jQuery最好使用1.3版本的,有些版本行不通,亲测1.8版本不行
HTML代码:
js代码:
$(".test").imgbox({
'speedIn': 500,
'speedOut': 500,
'alignment': 'center',
'overlayShow': true,
'allowMultiple': false,
'autoScale': true
});
效果:
讲解:
以上例子中,我们只用了一行js代码“$(".test").imgbox();”,就实现了图片弹出放大效果。这是因为在jquery.imgbox.js中imgbox()函数有默认的参数。当我们调用函数但没有传递参数时,会加载默认的参数,显示默认效果和样式。
如果觉得默认样式不合适,有两种方式进行修改:1、修改jquery.imgbox.js中imgbox()函数的默认参数;2、调用imgbox()函数时,给参数赋值。
//在jquery.imgbox.js中,默认参数如下,可以修改:
$.fn.imgbox.defaults = {
padding : 10,
alignment : 'auto', // auto OR center
allowMultiple : true,
autoScale : true,
speedIn : 500,
speedOut : 500,
easingIn : 'swing',
easingOut : 'swing',
zoomOpacity : false,
overlayShow : false,
overlayOpacity : 0.5,
hideOnOverlayClick : true,
hideOnContentClick : true
};
参数的含义:
padding:弹窗中图片的边框,0为没有边框。
alignment:弹窗的位置,“auto”或“center”,默认情况下,它从缩略图所在方向扩展弹窗
allowMultiple:如果选true,允许多个弹出窗口同时打开
autoScale:如果为true,弹窗会自适应窗口的大小
speedIn、speedOut:打开弹窗和关闭弹窗的速度,单位:毫秒
zoomOpacity:如果为true,会在弹窗缩放时改变透明度
overlayShow:如果为true,会有遮罩层(默认为false;遮罩层的颜色在css中设置)
overlayOpacity:遮罩层的透明度(取值范围0~1)
hideOnOverlayClick:当点击遮罩层时,关闭弹窗
hideOnContentClick:当点击图片时,关闭弹窗
转载自:https://blog.csdn.net/kangnan00/article/details/72518352
资源下载(里面附带例子):http://download.csdn.net/detail/kangnan00/9846375
jQuery插件——imgbox(点击图片查看大图)的更多相关文章
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- 点击图片查看大图(纯js)
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...
- jquery层居中,点击小图查看大图,弹出层居中代码
1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- android开发:点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
- 点击小图查看大图jQuery插件FancyBox魔幻灯箱
今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- Java为什么会流行
为什么Java语言能长期占据编程语言排行榜首位? 面向对象设计,使用简单,可以很快速的入门: 开源生态做得好,很多可重用的组件,拿来即用: 跨平台,高性能,是做后台开发的首选 另一方面,Java命好, ...
- Bzoj 1926: [Sdoi2010]粟粟的书架(二分答案+乱搞+主席树)
1926: [Sdoi2010]粟粟的书架 Time Limit: 30 Sec Memory Limit: 552 MB Description 幸福幼儿园 B29 班的粟粟是一个聪明机灵.乖巧可爱 ...
- 洛谷 P1613 跑路 题解
P1613 跑路 题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十分牛B的 ...
- 洛谷 P1376 机器工厂 题解
P1376 机器工厂 题目描述 小T开办了一家机器工厂,在N(N<=10000)个星期内,原材料成本和劳动力价格不断起伏,第i周生产一台机器需要花费Ci(1<=Ci<=5000)元. ...
- sqlite3 入门
SQLite3 C语言API入门下载SQLite3 我们下载sqlite源码包,只需要其中的sqlite3.c.sqlite.h即可.最简单的一个创建表操作#include <stdio.h&g ...
- c++学习知识整理
<iomanip>传送门:https://baike.baidu.com/item/iomanip/3319954?fr=aladdin linux为何用./运行程序:https://bl ...
- (17)打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- Python正则表达式【转载】
原作者:LouieZhang 原文出处:https://www.cnblogs.com/LouieZhang/p/7399836.html 0x00 简介 正则表达式就是描述字符串排列的一套规则.利用 ...
- 浅谈Python-IO多路复用(select、poll、epoll模式)
1. 什么是IO多路复用 在传统socket通信中,存在两种基本的模式, 第一种是同步阻塞IO,其线程在遇到IO操作时会被挂起,直到数据从内核空间复制到用户空间才会停止,因为对CPython来说,很多 ...
- ansys meshing当中共享节点的操作
原视频下载地址: https://yunpan.cn/cYKuN9mIHMUxa 访问密码 5858