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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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中创建并处理图象
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
python复制文件的方法实例详解
2015/05/22 Python
Python中的变量和作用域详解
2016/07/13 Python
使用python为mysql实现restful接口
2018/01/05 Python
django允许外部访问的实例讲解
2018/05/14 Python
详解Python3 基本数据类型
2019/04/19 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python第三方库学习笔记
2020/02/07 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
临床医学生职业规划书范文
2014/10/25 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
高效课堂教学反思
2016/02/24 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server