基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="container">
<img src="data:images/1.jpeg" alt="1" />
<img src="data:images/2.jpeg" alt="2" />
<img src="data:images/3.jpeg" alt="3" />
<img src="data:images/4.jpeg" alt="4" />
<img src="data:images/5.jpeg" alt="5" />
</div>
<div class="name">
<p>No 1</p>
</div>

js代码:

$(function () {

            var interval;
$(".container img").click(function cover() {
$(this).addClass("zoom").fadeOut(700, append);
function append() {
$(this).removeClass("zoom").appendTo(".container").show();
var name = $(".container").children("img").first().attr("alt");
$(".name p").text("No " + name);
} }) function auto() {
var play = $(".container").children("img").first();
play.addClass("zoom").fadeOut(700, append);
function append() {
$(this).removeClass("zoom").appendTo(".container").show();
var name = $(this).parent().children("img").first().attr("alt");
$(".name p").text("No " + name);
}
interval = setTimeout(auto, 5000);
} $(".container img").hover(function () {
stopPlay();
}, function () {
interval = setTimeout(auto, 5000);
}) function stopPlay() {
clearTimeout(interval)
}
auto(); })

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

基于jquery鼠标点击图片翻开切换效果的更多相关文章

  1. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  2. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  3. 基于jquery仿360网站图片选项卡切换代码

    今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  4. 基于Jquery的商城商品图片的放大镜效果(非组件)

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  5. jQuery实现点击图片简单放大效果

    一.HTML代码如下: <img class="comment_pics" width="50px" height="50px" sr ...

  6. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  7. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  8. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  9. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

随机推荐

  1. ceph-mon 代码解读

    一.概述: ceph-mon代码必备知识:Paxos算法,参见此处 数据结构分析: monitor代码结构:    

  2. 代码管理(四)SVN和Git对比

    在日常运维工作中,经常会用到版本控制系统,目前用到最广泛的版本控制器就是SVN和Git,那么这两者之间有什么不同之处呢?SVN(Subversion)是集中式管理的版本控制器,而Git是分布式管理的版 ...

  3. 【php】thinkphp以post方式查询时分页失效的解决方法

    好久没有写博客了,最近说实话有点忙,各个项目都需要改bug.昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢博客园大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题 ...

  4. 【Algorithm】插入排序

    一. 算法描述 插入排序具体算法描述如下: 从第一个元素开始,该元素可以认为已经被排序 取出下一个元素,在已经排序的元素序列中从后向前扫描 如果该元素(已排序)大于新元素,将该元素移到下一位置 重复步 ...

  5. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  6. Error Code: 1030. Got error -1 from storage engine

    这个问题通常是数据库可以建表,旧表可以插入数据,正常:可是新表无法插入数据,无法改名等操作: 先从文件权限找方法,没法解决: 在网上搜了一通,大家都说的磁盘满了,但是我们的磁盘还空着呢! 后来,发现! ...

  7. C# 禁止datagridview 自动产生列

    dataGridView1.AutoGenerateColumns = false;

  8. MySQL数据库知识点整理 (持续更新中)

    一.修改用户密码 格式(在命令行下输入):mysqladmin -u 用户名 -p旧密码 password 新密码 1. 给root添加密码ab12:  mysqladmin -uroot -pass ...

  9. Mac 升级后idea执行git命令报错xcrun: error: invalid active developer path的解决办法

    报错 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...

  10. 请教Mysql如何删除 不包含 某些字符的记录

    删除包含指定字符的记录 delete from `表` where `字段` like '%指定字符1%' or like '%指定字符2%' or like '%指定字符3%' 删除不包含指定字符的 ...