JavaScript基础学习--03图片翻转
JavaScript基础学习--03图片翻转
用户1148399
发布于 2018-01-09 15:16:10
发布于 2018-01-09 15:16:10
一、利用纯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 width: 306px;
3 height: 306px;
4 border: 1px solid red;
5 margin: 20px auto;
6 }
7 .cardWrap{
8 position: relative;
9 width: 100px;
10 height: 100px;
11 border: 1px solid red;
12 float: left;
13 }
14 .cardWrap img{
15 width: 100%;
16 height: 100%;
17 }
18 .card {
19 width: 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 width: 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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读