<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery鼠标悬停图片翻转效果 - 站长素材</title>

</head>

<body>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;text-decoration:none;}

body{font:12px/180% Arial;}

.brand a{

    display: block;

    float: left;

    margin: 20px;

    width: 180px;

    height: 240px;

    text-align: center;

    position: relative;

}

.brand img{

    width: 180px;

    height: 240px;

}

.brand .info{

    display: none;

    background-color: #f0f0f0;

    color: #369242;

}

.vertical .info{

    width: 0;

    height: 240px;

    margin: 0 auto;

}

.horizontal img{

    position: absolute;

    top: 0;

    left: 0;

}

.horizontal .info{

    width: 180px;

    height: 0;

    top: 120px;

    position: absolute;

    left: 0;

}

</style>

<div style="width:720px;margin:0 auto;">

    <div id="vertical" class="brand vertical">

        <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/1.jpg" /><div class="info">高圆圆</div></a>

        <a target="_blank" href="#"><img lta="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/2.jpg" /><div class="info">高圆圆</div></a>

        <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/3.jpg" /><div class="info">高圆圆</div></a>

    </div>

    <div style="clear:both;"></div>

    <div id="horizontal" class="brand horizontal">

        <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/1.jpg" /><div class="info">高圆圆</div></a>

        <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/2.jpg" /><div class="info">高圆圆</div></a>

        <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/3.jpg" /><div class="info">高圆圆</div></a>

    </div>

</div>

<script type="text/javascript" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

//品牌翻转

var turn = function(target,time,opts){

    target.find('a').hover(function(){

        $(this).find('img').stop().animate(opts[0],time,function(){

            $(this).hide().next().show();

            $(this).next().animate(opts[1],time);

        });

    },function(){

        $(this).find('.info').animate(opts[0],time,function(){

            $(this).hide().prev().show();

            $(this).prev().animate(opts[1],time);

        });

    });

}

var verticalOpts = [{'width':0},{'width':'180px'}];

turn($('#vertical'),100,verticalOpts);

var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];

turn($('#horizontal'),100,horizontalOpts);

</script>

<div align="center" style="clear:both;font-size:12px;color:#666;">

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>

<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>

</div>

</div>

</body>

</html>

jquery-卡片翻转的更多相关文章

  1. Android 实现卡片翻转的动画（翻牌动画）

    Android 实现卡片翻转的动画(翻牌动画) 需求描述 点击卡片,卡片翻转过来显示内容. 点击左边的卡片,将卡片翻转显示右边的图片结果. 功能实现 因为要翻转所以使用动画来完成翻转的动画.动画分为两 ...

  2. 一个纯CSS实现的卡片翻转效果

    先上代码 <div id="box"> <div class="front">正面</div> <div class= ...

  3. javascript开源大全

    javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...

  4. jquery 3D分页翻转滑块

    jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效.

  5. 卡片抽奖插件 CardShow

    这个小项目(卡片秀)是一个卡片抽奖特效插件,用开源项目这样的词语让我多少有些羞愧,毕竟作为一个涉世未深的小伙子,用项目的标准衡量还有很大差距.不过该案例采用 jQuery 插件方式编写,提供配置参数并 ...

  6. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  7. 响应式卡片抽奖插件 CardShow

    GitHub: https://github.com/nzbin/CardShow/ Demo: https://nzbin.github.io/CardShow/ 前言 这个小项目(卡片秀)是一个卡 ...

  8. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  9. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  10. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...

随机推荐

  1. python--类中的对象方法、类方法、静态方法的区别

    1.对象方法:顾名思义,是对类实例化后的对象有效的,由对象调用 2.类方法:第一个参数是cls(当前类),是对当前类做的额外的处理,类方法需要用类去调用,而不是实例对象调用 3.静态方法:没有参数!没 ...

  2. BZOJ3172 [Tjoi2013]单词 字符串 SA ST表

    原文链接http://www.cnblogs.com/zhouzhendong/p/9026543.html 题目传送门 - BZOJ3172 题意 输入$n(n\leq 200)$个字符串,保证长度 ...

  3. 给定两个字符串 s 和 t，它们只包含小写字母。 字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。

    给定两个字符串 s 和 t,它们只包含小写字母.字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母.请找出在 t 中被添加的字母. 示例: 输入: s = "abcd" ...

  4. Python3.4+Django1.9+Bootstrap3

    实现和原理 Python集成Django开发框架后,可以通过在cmd命令提示符下建立工程,工程名为learn_models 1 django-admin.py startproject learn_m ...

  5. vue-cli@3.x之使用vue ui创建项目-来自一个战五渣的体验

    1. 全局安装vue-cli yarn global add @vue/cli // 检查安装是否成功 vue -V // 3.2.2 2. 初始化 vue ui 执行命令 vue ui 2.1 该命 ...

  6. Err.number错误号和可捕获的 Microsoft access 数据库引擎和 DAO错误说明

    错误码        信息2420        数字语法错误2421        日期语法错误2422        字符串语法错误2423        ‘.’.‘!’.或 ‘()’的使用无效2 ...

  7. BZOJ.3218.a + b Problem(最小割ISAP 可持久化线段树优化建图)

    BZOJ UOJ 首先不考虑奇怪方格的限制,就是类似最大权闭合子图一样建图. 对于奇怪方格的影响,显然可以建一条边\((i\to x,p_i)\),然后由\(x\)向\(1\sim i-1\)中权值在 ...

  8. 搭建WordPress 个人博客

    1,准备 LAMP 环境 LAMP 是 Linux.Apache.MySQL 和 PHP 的缩写,是 Wordpress 系统依赖的基础运行环境.我们先来准备 LAMP 环境: (由于部分服务安装过程 ...

  9. 面试题fugui

    1.什么是栈溢出,在什么情况下可能会出现 栈溢出是由于C语言系列没有内置检查机制来确保复制到缓冲区的数据不得大于缓冲区的大小,因此当数据足够大时,将会溢出缓冲区的范围. python函数调用是通过栈这 ...

  10. ACPI状态简介

    我们平时对电脑的的待机.休眠.睡眠等等都属于ACPI表示高级配置和电源管理接口(Advanced Configuration and Power Management Interface)范畴. AC ...