JavaScript基础学习--03图片翻转

Demos： https://github.com/jiangheyan/JavaScriptBase

一、利用纯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>