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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Openlayers实现测量功能
Sep 25 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
简单分析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数组(array)输出的三种形式详解
2013/06/05 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
python中的闭包用法实例详解
2015/05/05 Python
Python执行时间的计算方法小结
2017/03/17 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
简单了解django orm中介模型
2019/07/30 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
早餐连锁店计划书
2014/01/08 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
学生会干部自荐信
2014/02/04 职场文书
小学英语复习计划
2015/01/19 职场文书
学雷锋倡议书
2015/01/19 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书