一、利用纯js编写，兼容IE9以及IE9以上
1、两张图片重合排放，并且背面的图片display（none）。
2、点击事件中让正面图片width随一定的大小减少width -= speed,最终display（none），反面图片反之；
3、注意点：让图片有180°翻转的效果，需要不能设置absolute，并需要margin（auto）
4、使用关键技术：width+-； var a = setInterval; clearInterval( a );
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" type="text/css" href="css/fanpai.css"> 7 </head> 8 <body> 9 <div id="cardContain"> 10 <div class="cardWrap"> 11 <div class="card cardA" data-info="1"> 12 <img src="images/a.jpg" alt="抽奖"/> 13 </div> 14 <div class="card cardB"> 15 <img src="" alt="一等奖"/> 16 </div> 17 </div> 18 <div class="cardWrap"> 19 <div class="card cardA" data-info="2"> 20 <img src="images/a.jpg" alt="抽奖"/> 21 </div> 22 <div class="card cardB"> 23 <img src="" alt="一等奖"/> 24 </div> 25 </div> 26 <div class="cardWrap"> 27 <div class="card cardA" data-info="3"> 28 <img src="images/a.jpg" alt="抽奖"/> 29 </div> 30 <div class="card cardB"> 31 <img src="" alt="一等奖"/> 32 </div> 33 </div> 34 <div class="cardWrap"> 35 <div class="card cardA" data-info="4"> 36 <img src="images/a.jpg" alt="抽奖"/> 37 </div> 38 <div class="card cardB"> 39 <img src="" alt="一等奖"/> 40 </div> 41 </div> 42 <div class="cardWrap"> 43 <div class="card cardA" data-info="5"> 44 <img src="images/a.jpg" alt="抽奖"/> 45 </div> 46 <div class="card cardB"> 47 <img src="" alt="一等奖"/> 48 </div> 49 </div> 50 <div class="cardWrap"> 51 <div class="card cardA" data-info="6"> 52 <img src="images/a.jpg" alt="抽奖"/> 53 </div> 54 <div class="card cardB"> 55 <img src="" alt="一等奖"/> 56 </div> 57 </div> 58 <div class="cardWrap"> 59 <div class="card cardA" data-info="7"> 60 <img src="images/a.jpg" alt="抽奖"/> 61 </div> 62 <div class="card cardB"> 63 <img src="" alt="一等奖"/> 64 </div> 65 </div> 66 <div class="cardWrap"> 67 <div class="card cardA" data-info="8"> 68 <img src="images/a.jpg" alt="抽奖"/> 69 </div> 70 <div class="card cardB"> 71 <img src="" alt="一等奖"/> 72 </div> 73 </div> 74 <div class="cardWrap"> 75 <div class="card cardA" data-info="9"> 76 <img src="images/a.jpg" alt="抽奖"/> 77 </div> 78 <div class="card cardB"> 79 <img src="" alt="一等奖"/> 80 </div> 81 </div> 82 </div> 83 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 84 <script src="js/fanpai.js"></script> 85 </body> 86 </html>
1 #cardContain{ 2 306px; 3 height: 306px; 4 border: 1px solid red; 5 margin: 20px auto; 6 } 7 .cardWrap{ 8 position: relative; 9 100px; 10 height: 100px; 11 border: 1px solid red; 12 float: left; 13 } 14 .cardWrap img{ 15 100%; 16 height: 100%; 17 } 18 .card { 19 100%; 20 height: 100%; 21 margin: auto; 22 cursor: pointer; 23 } 24 #cardContain .cardA, #cardContain .cardB{ 25 text-align: center; 26 } 27 #cardContain .cardB{ 28 display: none; 29 background: red; 30 } 31 #cardContain .cardA{ 32 background: orange; 33 }
1 /** 2 * Created by jiangheyan on 2017/6/23 3 */ 4 (function() { 5 var datas = [{ 6 id: 1, 7 info: '一等奖', 8 src: 'images/a.jpg' 9 }, { 10 id: 2, 11 info: '二等奖', 12 src: 'images/a.jpg' 13 }, { 14 id: 3, 15 info: '三等奖', 16 src: 'images/a.jpg' 17 }, { 18 id: 4, 19 info: '豪华奖', 20 src: 'images/a.jpg' 21 }, { 22 id: 5, 23 info: '特等奖', 24 src: 'images/a.jpg' 25 }, { 26 id: 6, 27 info: '50积分', 28 src: 'images/a.jpg' 29 }, { 30 id: 7, 31 info: '100积分', 32 src: 'images/a.jpg' 33 }, { 34 id: 8, 35 info: '安慰奖', 36 src: 'images/a.jpg' 37 }, { 38 id: 9, 39 info: '很遗憾，您未中奖', 40 src: 'images/a.jpg' 41 }]; 42 $('#cardContain').one('click', '.cardWrap', function() { 43 var $this = $(this); 44 var $cardA = $this.find('.cardA'); 45 var $cardB = $this.find('.cardB'); 46 var $img = $cardB.find('img'); 47 var info = parseInt($cardA.data('info')); 48 var src = ''; 49 var altTex = ''; 50 for (var i = 0; i < datas.length; i++) { 51 if (info === datas[i].id) { 52 src = datas[i].src; 53 altTex = datas[i].info; 54 } 55 } 56 var wid = 100; 57 var flag = wid; 58 var speed = wid / 20; 59 var showA = setInterval(function() { 60 wid -= speed; 61 $cardA.width(wid + '%'); 62 if (wid <= 0) { 63 clearInterval(showA); 64 $img.attr('src', src); 65 $img.attr('alt', altTex); 66 $cardA.css('display', 'none'); 67 var showB = setInterval(function() { 68 wid += speed; 69 $cardB.css('display', 'block'); 70 $cardB.width(wid + '%'); 71 if (wid >= flag) { 72 clearInterval(showB); 73 } 74 }, 10); 75 } 76 }, 10); 77 }); 78 })();
二、纯css技术 之 利用backface-visibility(hidden|visible)---背面是否可见，缺陷：兼容IE10以上（包括IE10）
1、两张图片重合显示，首先让背面的图片翻转180°，并设置backface-visibility（hidden）
2、在两张图片的父级元素上做点击事件，添加类（主要让这个父级元素翻转180°），此时情况就是正面的变成了反面，反面的变成了正面，因为有了backface-visibility（hidden）属性，所以正面可见，反面不可见；
3、利用transition: 0.6s; （添加在父级元素中），让动画有了时间限制，提高用户体验度。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 7 <!-- <script src="js/fanzhuan.js"></script> --> 8 <style type="text/css"> 9 /* entire container, keeps perspective */ 10 .flip-container { 11 /*perspective: 1000;*/ 12 } 13 /* flip the pane when hovered */ 14 .fli{ 15 transform: rotateY(180deg); 16 } 17 18 .flip-container, .front, .back { 19 300px; 20 height: 150px; 21 /*float: left;*/ 22 } 23 24 /* flip speed goes here */ 25 .flipper { 26 transition: 1.6s; 27 transform-style: preserve-3d; 28 position: relative; 29 } 30 31 /* hide back of pane during swap */ 32 .front, .back { 33 -webkit-backface-visibility: hidden; 34 -moz-backface-visibility: hidden; 35 -ms-backface-visibility: hidden; 36 backface-visibility: hidden; 37 position: absolute; 38 top: 0; 39 left: 0; 40 cursor: pointer; 41 } 42 43 /* front pane, placed above back */ 44 .front { 45 z-index: 2; 46 } 47 48 /* back, initially hidden pane */ 49 .back { 50 -webkit-transform: rotateY(180deg); 51 -moz-transform: rotateY(180deg); 52 -ms-transform: rotateY(180deg); 53 } 54 </style> 55 </head> 56 <body> 57 <div class="container"> 58 <div class="flip-container"> 59 <div class="flipper"> 60 <div class="front"> 61 <!-- 前面内容 --> 62 <img src="images/11.jpg"> 63 </div> 64 <div class="back"> 65 <!-- 背面内容 --> 66 <img src="images/22.jpg"> 67 </div> 68 </div> 69 </div> 70 </div> 71 <script type="text/javascript"> 72 $('.container').one('click', '.flipper', function() { 73 var $this = $(this); 74 $this.addClass('fli'); 75 }); 76 </script> 77 </body> 78 </html>