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

在线预览   源码下载

实现的代码。

html代码:

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

js代码:

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"); }
});

via:http://www.w2bc.com/Article/39023

基于jQuery图片弹出翻转特效代码的更多相关文章

  1. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  2. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  3. jQuery点击图片弹出放大特效下载

    效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  5. JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转)

    原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...

  6. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  7. jQuery效果之封装一个文章图片弹出放大效果

    首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部, ...

  8. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

随机推荐

  1. mysql insert if not exists防止插入重复记录的方法(转)

    MySQL 当记录不存在时插入(insert if not exists) 在 MySQL 中,插入(insert)一条记录很简单,但是一些特殊应用,在插入记录前,需要检查这条记录是否已经存在,只有当 ...

  2. FluentScheduler

    The job configuration is handled in a Registry class. A job is either an Action or a class that inhe ...

  3. 开源项目mark

    1. Apache的开源软件列表 http://www.oschina.net/project/apache 2. Java开源Apache项目 http://www.open-open.com/56 ...

  4. FFmpeg 滤镜及其效果

    原文地址:https://blog.csdn.net/dangxw_/article/details/49001413 代码中使用滤镜参见上一篇博客:http://blog.csdn.net/dang ...

  5. shell脚本监控cpu/内存使用率 转

    该脚本检测cpu和内存的使用情况,只需要调整memorySetting.cpuSetting.userEmail要发邮件报警的email地址即可 如果没有配置发邮件参数的哥们,已配置了的,直接飞到代码 ...

  6. Create PDB with Sample schemas in 12C

    查看: SQL> select * from ( 2 select username, account_status from dba_users order by created desc) ...

  7. VC学习笔记:状态栏

    原文链接: http://www.cnblogs.com/skyseraph/archive/2010/11/27/1889952.html 实例学习 1  新建对话框程序 2  为Dlg类添加成员变 ...

  8. SharePoint自动化部署,利用SPSD工具包

    目录 怎样使用SPSD 配置Environment XML文件 PowerShell激活Feature  上篇博客讲了利用PowerShell导出.导入AD中的Users.这篇介绍简单介绍一下SPSD ...

  9. U811.1接口EAI系列之一--通用把XML传送给EAI处理方法--PowerBuilder语言

    1.前面配置参考:http://www.cnblogs.com/spring_wang/p/3393147.html 2.pb通用调EAI方法代码如下: //===================== ...

  10. mysql-8.0.11 比较坑的地方dba门要淡定

    [事件描述] 突然之间大量的连接进入数据库.并放开手干,这个使得mysql使用了大量的内存,触发了linux的oom机制.然后mysql就这样 被linux给干掉了.没错MySQL宕机了,要相信我说的 ...