jquery插件制作 -- 2.图片走廊:gallery

　　本文主要内容是讲解图片走廊-gallery的实现。

　　首先创建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.zip

转载于:https://www.cnblogs.com/softlover/archive/2012/08/14/2638836.html

jquery插件制作 -- 2.图片走廊:gallery相关推荐

JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
jquery插件制作
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下. jquery插件的基本格式: (function($){$.fn.t ...
html进行语音播报,JQuery插件制作：[2]语音播报jspeech
在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能.在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音.这些都是给手机app(android.ios)提供sdk包,然后在调 ...
jquery插件制作 -- 3.表单验证
今天的内容是关于表单验证插件的制作.表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范. 先下页面代码: <!DOCTYPE html P ...
html 图片旋转插件,jQuery插件expander实现图片翻转特效
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 引入CSS和JS expander.min.js ...
jQuery插件-轻量图片轮换-UISlide2
UISlide 的不同效果展现: 运行代码本文转自懒得安分博客园博客,原文链接:XXXXXXXX,如需转载请自行联系原作者
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
http://www.cnblogs.com/lhb25/p/50-jquery-plugins-f.html http://www.cnblogs.com/lhb25/p/must-read-lin ...
cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
100个优秀jQuery插件精选
100个优秀jQuery插件精选在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...

jquery插件制作 -- 2.图片走廊:gallery

jquery插件制作 -- 2.图片走廊:gallery相关推荐

最新文章

热门文章