jquery实现带缩略图的全屏图片画廊效果实例


Posted in Javascript onJune 25, 2015

本文实例讲述了jquery实现带缩略图的全屏图片画廊效果。分享给大家供大家参考。具体如下:

运行效果如下图所示:

jquery实现带缩略图的全屏图片画廊效果实例

主要代码如下:

(function($) {
$.fn.preload = function(options) {
  var opts = $.extend({}, $.fn.preload.defaults, options);
  o   = $.meta ? $.extend({}, opts, this.data()) : opts;
  var c  = this.length,
   l  = 0;
  return this.each(function() {
   var $i = $(this);
   $('<img/>').load(function(i){
    ++l;
    if(l == c) o.onComplete();
   }).attr('src',$i.attr('src')); 
  });
 };
 $.fn.preload.defaults = {
  onComplete : function(){return false;}
 };
})(jQuery);

完整实例代码点击此处本站下载。

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
javascript实现跨域的方法汇总
Jun 25 #Javascript
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
jquery实现的缩略图预览滑块实例
Jun 25 #Javascript
You might like
php实现的日历程序
2015/06/18 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python实现html转ubb代码(html2ubb)
2014/07/03 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python运行其他程序的实现方法
2017/07/14 Python
Numpy之random函数使用学习
2019/01/29 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
培训科主任岗位职责
2014/08/08 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
税务会计岗位职责
2015/04/02 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技