jQuery插件expander实现图片翻转特效


Posted in Javascript onMay 21, 2015

分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下:

jQuery插件expander实现图片翻转特效

引入CSS和JS

<link href="css/expander.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<script src="js/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/expander.min.js"></script>

expander.min.js代码

!function(){function a(){var a=this;this.init=function(){$(document).ready(function(){var b=$("<div class='expander-siv'></div>");a.siv=b,$("div.expander-siv").length||$("body").append(b),$("img[data-expander]").each(function(){var c=$(this);c.attr("src",c.attr("src")+"?"+(new Date).getTime()),c.load(function(){var b=$(this).attr("data-expander"),c=$("<div data-expanderContainer></div>");if(c.addClass("expander-container"),b=b.replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:/g,'"$2": '),b=b?JSON.parse(b):{},b.animation&&c.addClass(b.animation),b.theme||(b.theme="dark",c.addClass("theme"),c.addClass("dark"),$("div.expander-siv").addClass("dark"),$("div.expander-siv").addClass("theme")),b.speed||(b.speed="normal"),b.url){var d=$(this).clone();d.attr("src",b.url+"?"+(new Date).getTime()),c.append(d)}else c.append($(this).clone());c.data("options",b),c.data("original",{parent:$(this),position:$(this).offset()}),c.css({position:"absolute",width:$(this).outerWidth(),height:$(this).outerHeight(),top:$(this).offset().top,left:$(this).offset().left}),$(this).data("container",c),c.addClass("anim-"+b.speed),$("body").append(c),$(this).on("click",function(){a.pop($(this).data("container"))}),c.on("click",function(){a.unpop($(this))})}),$(this).bind("expand",function(){a.pop($(this).data("container"))}),$(this).bind("retract",function(){a.unpop($(this).data("container"))})}),setInterval(function(){a.reLayout()},2e3)}),$(window).resize(function(){a.reLayout()})},this.reLayout=function(){$("div[data-expanderContainer]").each(function(){if($(this).hasClass("open"))$(this).css({top:$(window).scrollTop()+"px",left:"0px",width:"100%",height:"100%"});else{var b=$(this).data("original");$(this).css({width:b.parent.outerWidth(),height:b.parent.outerHeight(),top:b.parent.offset().top,left:b.parent.offset().left})}})},this.pop=function(b){a.siv.removeClass(),a.siv.addClass("expander-siv").addClass("theme").addClass(b.data("options").theme),a.siv.addClass("show"),b.addClass("open"),b.css({position:"absolute",top:$(window).scrollTop()+"px",left:"0px",width:"100%",height:"100%"})},this.unpop=function(b){a.siv.removeClass("show");var c=b.data("original").parent;b.css({position:"absolute",top:c.offset().top+"px",left:c.offset().left+"px",width:c.outerWidth()+"px",height:c.outerHeight()+"px"}),b.removeClass("open")},this.init()}var a=new a}();

JS代码:

<script>
    var index = 0;
    var timeout = setInterval(function () {
      if (index > 10) {
        window.clearInterval(timeout)
      }
      $("article").eq(index).addClass("show");
      index++
    }, 300);

    function showFoo() {
      $("#fooId").trigger("expand");
    }

    $("#expandSettings").on("click", function () {
      if ($("ul.settings").hasClass("open")) {
        $("ul.settings").removeClass("open");
      } else {
        $("ul.settings").addClass("open");

      }
    });
</script>

HTML

<section class="main">
<article>
<div class="imgContainer">
<h5>效果一</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"default"}'>
</div>
<div class="imgContainer">
<h5>效果二</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"diamond"}'>
</div>
<div class="imgContainer">
<h5>效果三</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"turn3d"}'>
</div>
<div class="imgContainer">
<h5>效果四</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"flip3d"}'>
</div>
<div class="imgContainer">
<h5>效果五</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"rotate"}'>
</div>
<div class="imgContainer">
<h5>效果六</h5>
<img src="images/chinaz.jpg" data-expander='{animation:"fade"}'>
</div>
</article>
</section>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
简单分析javascript面向对象与原型
May 21 #Javascript
jQuery获取上传文件的名称的正则表达式
May 21 #Javascript
js兼容火狐获取图片宽和高的方法
May 21 #Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 #Javascript
javascript去除空格方法小结
May 21 #Javascript
删除javascript所创建子节点的方法
May 21 #Javascript
png在IE6 下无法透明的解决方法汇总
May 21 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
如何在selenium中使用js实现定位
2020/08/18 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python实现画一颗树和一片森林
2018/06/25 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
计算机专业毕业生自我鉴定
2014/01/16 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
大学专科求职信
2014/07/02 职场文书
公司踏青活动方案
2014/08/16 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
KTV员工管理制度
2015/08/06 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Python os和os.path模块详情
2022/04/02 Python
vue实现简易音乐播放器
2022/08/14 Vue.js