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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
js实现一键复制功能
Mar 16 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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中显示数组与对象的实现代码
2011/04/18 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
js微信支付实现代码
2016/12/22 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
JavaScript运行原理分析
2018/02/09 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
入党申请自荐书范文
2014/02/11 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js