jquery插件制作 图片走廊 gallery


Posted in Javascript onAugust 17, 2012

首先创建jquery.gallery.js的插件文件,构建程序骨架。

(function ($) { 
$.fn.gallery = function () { 


return this.each(function () { 



var self = $(this); 



self.click(function () { 



}); 


}); 

} 
})(jQuery);

创建html文件,使用我们创建的插件。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script> 
<script type="text/javascript" src="Scripts/jquery.gallery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('img').gallery(); 
}); 
</script> 
</head> 
<body> 
<img src="Images/orderedList1.png" alt="" /> 
<img src="Images/orderedList2.png" alt="" /> 
<img src="Images/orderedList3.png" alt="" /> 
</body> 
</html>

现在我们开始考虑如何实现点击图片的时候,显示放大图片的效果。其实我们显示放大的图片不是原先的图片,而是我们clone出了一个新图片,将他添加到页面中并加以显示。此外通过计算页面高度、宽度,图片高度、宽度,滚动条位置,来实现大图居中对齐的实现。下面我们看改进后的代码:
(function ($) { 
$.fn.gallery = function () { 
return this.each(function () { 
//将this变量保存到self,目的是为了避免程序错误 
//至于原因,上章简单提到this在函数上下中中代表的对象不同 
var self = $(this); 
//统一将小图的高度设置成100(根据个人需要可以调整,或者提供options选项) 
self.height(100); //添加click事件 
self.click(function () { 
//移除id为myImgGallery的对象,其实这个对象就是大图对象 
//每次点击的时候,都要移除上一次点击时产生的大图 
$('#myImgGallery').remove(); 
self.clone() //jquery的clone方法,clone图片 
.attr('id', 'myImgGallery')//设置id为myImgGallery 
.height($(window).height() / 2)//将图片高度设置为页面可用区域高度的一半(根据自己的需要也可以设置成其他值) 
.css({ 
position: 'absolute' 
}) 
.prependTo('body')//将大图添加到body对象中 
//使用自己创建的center插件,实现图片居中 
//注意,一定要将clone的对象添加到body后才能调用center方法,否则clone对象的width和height都为0 
.center() 
.click(function () {//添加大图的click事件 
$(this).remove(); //点击大图时,删除本身 
}); 
}); 
}); 
}; 
$.fn.center = function () { 
return this.each(function () { 
$(this).css({ 
//设置绝对定位,这样他就会浮动在最上层(必要的情况下可以设置zindex属性) 
position: 'absolute', 
//设置垂直居中对齐 
top: ($(window).height() - $(this).height()) / 2 + $(window).scrollTop() + 'px', 
//设置水平居中对齐 
left: ($(window).width() - $(this).width()) / 2 + $(window).scrollLeft() + 'px' 
}); 
}); 
}; 
})(jQuery);

好了,今天的内容到此结束。

demo下载地址:jQuery.plugin.gallery

Javascript 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
jquery插件制作教程 txtHover
Aug 17 #Javascript
IFrame跨域高度自适应实现代码
Aug 16 #Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
You might like
PHP实现简易图形计算器
2020/08/28 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python url 参数修改方法
2018/12/26 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
C#的几个面试问题
2016/05/22 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
银行求职信
2014/05/31 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014年科室工作总结
2014/11/20 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书