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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
JavaScript中的 new 命令
May 22 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP序列化操作方法分析
2016/09/28 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Java分治归并排序算法实例详解
2017/12/12 Python
pandas数值计算与排序方法
2018/04/12 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python实现单机五子棋
2020/08/28 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
What is view? why do we have view?
2012/06/22 面试题
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
幼儿园教学管理制度
2014/02/04 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server