今儿做项目用到图片点击翻转，网上大概有几种做法：
1.基于jquery的插件，各有利弊，都挺好用的：
10+ jQuery Flip effect plugin with examples
http://www.jqueryrain.com/2012/08/jquery-flip-effect-plugin-examples/
2.canvas
3.CSS3
4.自己写了一个，原理是 利用定时器将图片的宽度减小为0，替换图片后再将图片的宽度放大为原大小，尚未写成接口，功力太浅。。。
HTML+JQuery（本来用的JS，但是jQuery的选择器太强大了，做后续部分的时候不得不用了jQuery）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" /> </head> <body class="home"> <div class="wrapper"> <div class="header border"><div class="logo"><h3>XXXXXXX TO BE ACOUNTABLE</h3></div> <ul class="nav"> <li class="home"><a href="home.html">首页</a></li> <li class="experience"><a href="">XXXXXXXX</a></li> <li class="report"><a href="">XX</a></li> </ul> <div id="login"><a href="#">账号</a></div></div> <div class="content-wrapper"> <div id="imgWall"> <div class="row"> <div class="img-box"> <img class="border" src="img/1a.gif" alt="img/1b.gif" /> <div> <p class="imgText-top">外交家（Resource Investigator）</p> <p class="imgText-bottom">伯乐（Developer）关联（Connectedness）<br/>包容（Inclusiveness）积极（Positivity）</p> </div> </div> <div class="img-box"> <img class="border" src="img/2a.gif" alt="img/2b.gif" /> <div> <p class="imgText-top">评价者（Monitor Evaluator）</p> <p class="imgText-bottom">分析（Analytical）前瞻（Futuristic）<br/>战略（Strategic）</p> </div> </div> <div class="img-box"> <img class="border" src="img/3a.gif" alt="img/3b.gif" /> <div> <p class="imgText-top">点子（Plant）</p> <p class="imgText-bottom">搜集（Input）发散（Intellection）<br/>理念（Ideation）</p> </div> </div> </div> <div class="row"> <div class="img-box"> <img class="border" src="img/4a.gif" alt="img/4b.gif" /> <div> <p class="imgText-top">实干家（Implementer）</p> <p class="imgText-bottom">成就（Achiever）信仰（Belief）<br/>纪律（Discipline）集中（Focus）</p> </div> </div> <div class="img-box"> <img class="border" src="img/5a.gif" alt="img/5b.gif" /> <div> <p class="imgText-top">合作者（Team worker） </p> <p class="imgText-bottom">适应（Adaptability）体谅（Empathy）<br/>交往（Relator）和谐（Harmony）</p> </div> </div> <div class="img-box"> <img class="border" src="img/6a.gif" alt="img/6b.gif" /> <div> <p class="imgText-top">完善者（Complete Finisher）</p> <p class="imgText-bottom">公平（Fairness）统筹（Arranger）<br/>审慎（Deliberative）</p> </div> </div> </div> <div class="row"> <div class="img-box"> <img class="border" src="img/7a.gif" alt="img/7b.gif" /> <div> <p class="imgText-top">专业师（Specialist）</p> <p class="imgText-bottom">学习（Learner）回顾（Context）<br/>排难（Restorative）</p> </div> </div> <div class="img-box"> <img class="border" src="img/8a.gif" alt="img/8b.gif" /> <div> <p class="imgText-top">推进者（Shaper）</p> <p class="imgText-bottom">行动（Activator）追求（Significance）<br/>竞争（Competition）统率（Command）</p> </div> </div> <div class="img-box"> <img class="border" src="img/9a.gif" alt="img/9b.gif" /> <div> <p class="imgText-top">协调者（Coordinatot）</p> <p class="imgText-bottom">自信（Self-Assurance）取悦（Woo）<br/>完美（Maximize）别化（Individualization）</p> </div> </div> </div> <div id="forCache" class="hide"> <img src="img/1b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /><img src="img/2b.gif" alt="" /> </div> </div> <div class="footer"> <span class="company-name"><span>→ XXXXXX</span>管理咨询有限公司</span> <ul class="foot-links"> <li><a href="">报告的隐私声明</a></li> <li><a href="">面试指导</a></li> <li><a href="">团队沟通内训</a></li> <li><a href="">网站体验</a></li> </ul> </div> </div> <script type="text/javascript" src="js/eventUtil.js"></script> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ var clickLock = 0; if( $(".img-box img").attr("src").indexOf("a") != -1 ){ $(".img-box div").hide(); } $(".img-box img").click(function(){ $this = $(this); $this.next("div").hide(); if(! !!$this.attr("src")) return false; if(clickLock) return false; clickLock = 1; var targetImg = $this, imgWidth = targetImg.width(), targetImgAlt = targetImg.attr("alt"), targetImgSrc = targetImg.attr("src"), rotateImg = function(rate, i, interval){ //rate：分多少次完成图片放大或缩小；函数需要接口化，并松散耦合，定时器限制问题。 try{ var step = imgWidth / rate;//每次减少或增加的宽度 } catch(ex) { throw new RangeError("rotate()中的除数rate不能为0！可能是图片原始宽度过小导致的"); }; var reduceImgWidth = function(){ var setT = setTimeout(function(){ ++i; var curWidth = imgWidth - step * i; targetImg.width(curWidth); if( ~~curWidth > 0){ setTimeout(arguments.callee, interval); } else { clearTimeout( setT); i=0; changeImg(); } },interval); }, increaseImgWidth = function(){ var setT = setTimeout(function(){ ++i; curWidth = step * i; if( Math.ceil(curWidth >= imgWidth)){ curWidth = imgWidth; }; targetImg.width(curWidth); if( curWidth !== imgWidth ){ setTimeout(arguments.callee, interval); } else { clearTimeout(setT); unsetVar(); } },interval); }, changeImg = function(){ targetImg.attr("alt",targetImgSrc); targetImg.attr("src",targetImgAlt); targetImg.width(0); increaseImgWidth(); }, unsetVar = function(){ i=0; clickLock = 0; if($this.attr("src").indexOf("b")!=-1) {//图片正面,翻转结束后显示 $this.next("div").show(3000); //$this.next("div").removeClass("hide"); } }; reduceImgWidth(); } rotateImg(10, 0, 30); }); $(".img-box").hover(function(){ $this = $(this); if($this.find("img").attr("src").indexOf("b")!=-1) //图片背面,显示文字说明 $this.find("div").show("slide"); }) .mouseleave(function(){ $this = $(this); if($this.find("img").attr("src").indexOf("b")!=-1) //图片背面,模拟css:hover鼠标移出 $this.find("div").hide("slide"); }); $(".img-box div").mouseenter(function(){ $(this).show("slide"); }) .mouseleave(function( ){ $(this).parent().mouseleave(function(){ $(this).find("div").hide("slide"); }); }); }); </script> </body> </html>
CSS：
/* CLIMB THE MOUNTAINS by ERSKINE DESIGN VERSION 1.0 CONTENTS ---------- 1.BODY 2.HEADER 3.FOOTER 4.CONTENT 6.GLOBAL ELEMENTS ------------------- COLOURS ----------- red #ff0000 black #000000 ------------------- */ @import url(reset.css); /* RESET CSS */ /*body ------------------------------------------------------*/ body{font-family:"微软雅黑","黑体","Arial","Palatino-Roman","Palatino","PalatinoLinotype-Roman","Palatino Linotype"; font-size:14px; line-height:24px; } body.home{font-weight:bold;} .wrapper{ width:100%; min-width:1080px; width:1080px; overflow:hidden; margin:auto; position:relative; padding-bottom:2em; } /*header ------------------------------------------------------*/ .header{ padding-top:1em; padding-bottom:1em; overflow:hidden;/*清除浮动*/ } .header h3 { display:inline; font-style:italic; padding-left:5em; padding-right:5em; color:#ff0000; float:left; font-size:1.2em; } .home .home a, .experience .experience a, .report .report a{ color:#ff0000; } .nav{ float:left; } .nav ul{ list-style-type:none; } .nav li{ display:block; float:left; padding-right:2em; padding-left:2em; } .nav a, #login a{ color:#000000; text-decoration:none; } .nav a:hover,#login a:hover, .nav a:focus #login a:focus{ color:#ff0000; } #login{ float:right; padding-right:3em; } /*footer ------------------------------------------------------*/ .footer{ padding-top:1.5em; padding-bottom:1.5em; } .footer ul li{ display:block; float:right; padding-right:0.5em; padding-left:0.5em; border-left:1px solid #000000; border-right:1px solid #000000; line-height:1em; } .footer ul a{ text-decoration:none; color:#000000; } .footer .company-name{ float:left; } .footer .company-name span{ color:#ff0000; } /*content -------------------------------------------------------*/ .content-wrapper{ width:98%; margin:auto; text-align:center; } .content-wrapper .img-box{ position:relative; display:inline; float:left; width:33%; height:216px; margin-left:auto; margin-right:auto; margin-top:0.1em; margin-bottom:0.1em; padding:0; overflow:hidden; text-align:center; } .content-wrapper .img-box img{ width:98%; height:98%; cursor:pointer; margin:0; } .content-wrapper .img-box img:hover{ border:2px #ff0000 groove; } .content-wrapper .img-box div{ display:none; } /* .content-wrapper .img-box img[src*='b.gif']:hover+div{ display:block; }*/ /*.content-wrapper .img-box img[src*="b.gif"]+div{ display:block; }*/ .img-box .imgText-top{ position:absolute; z-index:99999; top:3%; left:2%; width:96%; height:15%; background-color:#ffffff; } .img-box .imgText-bottom{ position:absolute; z-index:99999; bottom:3%; left:2%; width:96%; height:20%; background-color:#ffffff; } /*GLOBAL ELEMENTS -----------------------------------------------------*/ .border{ border:1px solid #ff0000; } .row{ display:block; overflow:hidden; margin:auto; width:98%;text-align:center;} .hide {display:none;}
页面设计的不兼容IE6，但是JS部分兼容。
整体效果：点击图片翻转图片并替换，图片背面鼠标hover时出现文字解释，鼠标离开文字解释消失。