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

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2016-01-24
本文给大家分享的是一款基于jQuery插件expander实现图片翻转特效,一共有6种不同的图片翻转样式,十分的炫酷,有需要的小伙伴可以参考下。

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

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

引入CSS和JS

<link href="css/expander.css" >
<link href="css/theme.css" >
<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>

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery插件boxScroll实现图片轮播特效
    本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码,非常简单实用,有需要的小伙伴可以参考下.BoxScroll       常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,到了尽头得往回跑,看看注释就知道了.       代码如下: HTML <!doctype html> <h ...
  • JQuery学习笔记实现图片翻转效果和TAB标签切换效果第1/2页
    为了保证前台页面的整洁,我们习惯性地将CSS放入一个单独的.CSS文件中以便调用,而JS也同样可以放到单独的JS文件中去,并且页面上的事件如onclick,onmouseover也可以分离出来,现在网上比较流行JQuery所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学 ...
  • jQuery插件zoom实现图片全屏放大弹出层特效
    jQuery插件zoom实现图片全屏放大弹出层特效
    jQuery zoom是一款能够查看相册大图的jQuery弹出层插件,点击相册的缩略图,就会弹出该相片对应的大图,并且带有个性的加载动画,还有上一张下一张按钮以及关闭按钮.使用方法非常简单.兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等浏览器.1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2. ...
  • jQuery插件Timelinr实现时间轴特效
    jQuery插件Timelinr实现时间轴特效
    时间轴是依据时间顺序,把一方面或多方面的事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户,本文给大家收集了互联网上的效果比较不错的一款,分享给大家前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
  • jQuery简易图片放大特效示例代码
    这篇文章主要介绍了通过jQuery实现的简易图片放大特效,需要的朋友可以参考下DEMO点击圆形图片,图片方法,将水的图片放置与下层,鼠标移上去的时候,图片高与宽同比增大,并且图片向左上移动 代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
猜你喜欢