增加 Jquery 函数, 实现点击字牌能够进行翻转.####
html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <style>
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section, main {
- display: block;
- }
- body {
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- *,
- *::after,
- *::before {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- html {
- font-size: 62.5%;
- }
- html * {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- body {
- font-size: 1.6rem;
- font-family: "Open Sans", sans-serif;
- color: #2d3d4f;
- background-color: #ccc;
- }
- a {
- text-decoration: none;
- }
- .pricing-switcher {
- text-align: center;
- }
- .pricing-switcher .fieldset {
- display: inline-block;
- position: relative;
- padding: 2px;
- border-radius: 50em;
- border: 2px solid #2d3e50;
- }
- .pricing-switcher input[type="radio"] {
- position: absolute;
- opacity: 0;
- }
- .pricing-switcher label {
- position: relative;
- z-index: 1;
- display: inline-block;
- float: left;
- width: 90px;
- height: 40px;
- line-height: 40px;
- cursor: pointer;
- font-size: 1.4rem;
- color: #ffffff;
- }
- .pricing-switcher .switch {
- position: absolute;
- top: 2px;
- left: 2px;
- height: 40px;
- width: 90px;
- background-color: #2d3e50;
- border-radius: 50em;
- -webkit-transition: -webkit-transform 0.5s;
- -moz-transition: -moz-transform 0.5s;
- transition: transform 0.5s;
- }
- .pricing-switcher input[type="radio"]:checked + label + .switch,
- .pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch {
- -webkit-transform: translateX(90px);
- -moz-transform: translateX(90px);
- -ms-transform: translateX(90px);
- -o-transform: translateX(90px);
- transform: translateX(90px);
- }
- .no-js .pricing-switcher {
- display: none;
- }
- .pricing-wrapper {
- position: relative;
- }
- .touch .pricing-wrapper {
- -webkit-perspective: 2000px;
- -moz-perspective: 2000px;
- perspective: 2000px;
- }
- .pricing-wrapper.is-switched .is-visible {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -ms-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- -webkit-animation: rotate 0.5s;
- -moz-animation: rotate 0.5s;
- animation: rotate 0.5s;
- }
- .pricing-wrapper.is-switched .is-hidden {
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
- -ms-transform: rotateY(0);
- -o-transform: rotateY(0);
- transform: rotateY(0);
- -webkit-animation: rotate-inverse 0.5s;
- -moz-animation: rotate-inverse 0.5s;
- animation: rotate-inverse 0.5s;
- opacity: 0;
- }
- .pricing-wrapper.is-switched .is-selected {
- opacity: 1;
- }
- .pricing-wrapper.is-switched.reverse-animation .is-visible {
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
- -ms-transform: rotateY(-180deg);
- -o-transform: rotateY(-180deg);
- transform: rotateY(-180deg);
- -webkit-animation: rotate-back 0.5s;
- -moz-animation: rotate-back 0.5s;
- animation: rotate-back 0.5s;
- }
- .pricing-wrapper.is-switched.reverse-animation .is-hidden {
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
- -ms-transform: rotateY(0);
- -o-transform: rotateY(0);
- transform: rotateY(0);
- -webkit-animation: rotate-inverse-back 0.5s;
- -moz-animation: rotate-inverse-back 0.5s;
- animation: rotate-inverse-back 0.5s;
- opacity: 0;
- }
- .pricing-wrapper.is-switched.reverse-animation .is-selected {
- opacity: 1;
- }
- .pricing-wrapper> li {
- background-color: #ffffff;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- outline: 1px solid transparent;
- }
- .pricing-wrapper> li::after {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- height: 100%;
- width: 50px;
- pointer-events: none;
- background: -webkit-linear-gradient( right , #ffffff, rgba(255, 255, 255, 0));
- background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
- }
- .pricing-wrapper> li.is-ended::after {
- display: none;
- }
- .pricing-wrapper .is-visible {
- position: relative;
- z-index: 5;
- }
- .pricing-wrapper .is-hidden {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: 1;
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -ms-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- }
- .pricing-wrapper .is-selected {
- z-index: 3 !important;
- }
- @media only screen and (min-width: 768px) {
- .pricing-wrapper> li::before {
- content: '';
- position: absolute;
- z-index: 6;
- left: -1px;
- top: 50%;
- bottom: auto;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- height: 50%;
- width: 1px;
- background-color: #b1d6e8;
- }
- .pricing-wrapper> li::after {
- display: none;
- }
- .exclusive .pricing-wrapper> li {
- box-shadow: inset 0 0 0 3px #2d3e50;
- }
- .has-margins .pricing-wrapper> li,
- .has-margins .exclusive .pricing-wrapper> li {
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
- }
- :nth-of-type(1)> .pricing-wrapper> li::before {
- display: none;
- }
- .has-margins .pricing-wrapper> li {
- border-radius: 4px 4px 6px 6px;
- }
- .has-margins .pricing-wrapper> li::before {
- display: none;
- }
- }
- @media only screen and (min-width: 1500px) {
- .full-width .pricing-wrapper> li {
- padding: 2.5em 0;
- }
- }
- .no-js .pricing-wrapper .is-hidden {
- position: relative;
- -webkit-transform: rotateY(0);
- -moz-transform: rotateY(0);
- -ms-transform: rotateY(0);
- -o-transform: rotateY(0);
- transform: rotateY(0);
- margin-top: 1em;
- }
- @media only screen and (min-width: 768px) {
- .exclusive .pricing-wrapper> li::before {
- display: none;
- }
- .exclusive + li .pricing-wrapper> li::before {
- display: none;
- }
- }
- @-webkit-keyframes rotate {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(200deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(180deg);
- }
- }
- @-moz-keyframes rotate {
- 0% {
- -moz-transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -moz-transform: perspective(2000px) rotateY(200deg);
- }
- 100% {
- -moz-transform: perspective(2000px) rotateY(180deg);
- }
- }
- @keyframes rotate {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0);
- -moz-transform: perspective(2000px) rotateY(0);
- -ms-transform: perspective(2000px) rotateY(0);
- -o-transform: perspective(2000px) rotateY(0);
- transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(200deg);
- -moz-transform: perspective(2000px) rotateY(200deg);
- -ms-transform: perspective(2000px) rotateY(200deg);
- -o-transform: perspective(2000px) rotateY(200deg);
- transform: perspective(2000px) rotateY(200deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(180deg);
- -moz-transform: perspective(2000px) rotateY(180deg);
- -ms-transform: perspective(2000px) rotateY(180deg);
- -o-transform: perspective(2000px) rotateY(180deg);
- transform: perspective(2000px) rotateY(180deg);
- }
- }
- @-webkit-keyframes rotate-inverse {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(-180deg);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(20deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0);
- }
- }
- @-moz-keyframes rotate-inverse {
- 0% {
- -moz-transform: perspective(2000px) rotateY(-180deg);
- }
- 70% {
- -moz-transform: perspective(2000px) rotateY(20deg);
- }
- 100% {
- -moz-transform: perspective(2000px) rotateY(0);
- }
- }
- @keyframes rotate-inverse {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(-180deg);
- -moz-transform: perspective(2000px) rotateY(-180deg);
- -ms-transform: perspective(2000px) rotateY(-180deg);
- -o-transform: perspective(2000px) rotateY(-180deg);
- transform: perspective(2000px) rotateY(-180deg);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(20deg);
- -moz-transform: perspective(2000px) rotateY(20deg);
- -ms-transform: perspective(2000px) rotateY(20deg);
- -o-transform: perspective(2000px) rotateY(20deg);
- transform: perspective(2000px) rotateY(20deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0);
- -moz-transform: perspective(2000px) rotateY(0);
- -ms-transform: perspective(2000px) rotateY(0);
- -o-transform: perspective(2000px) rotateY(0);
- transform: perspective(2000px) rotateY(0);
- }
- }
- @-webkit-keyframes rotate-back {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(-200deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(-180deg);
- }
- }
- @-moz-keyframes rotate-back {
- 0% {
- -moz-transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -moz-transform: perspective(2000px) rotateY(-200deg);
- }
- 100% {
- -moz-transform: perspective(2000px) rotateY(-180deg);
- }
- }
- @keyframes rotate-back {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(0);
- -moz-transform: perspective(2000px) rotateY(0);
- -ms-transform: perspective(2000px) rotateY(0);
- -o-transform: perspective(2000px) rotateY(0);
- transform: perspective(2000px) rotateY(0);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(-200deg);
- -moz-transform: perspective(2000px) rotateY(-200deg);
- -ms-transform: perspective(2000px) rotateY(-200deg);
- -o-transform: perspective(2000px) rotateY(-200deg);
- transform: perspective(2000px) rotateY(-200deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(-180deg);
- -moz-transform: perspective(2000px) rotateY(-180deg);
- -ms-transform: perspective(2000px) rotateY(-180deg);
- -o-transform: perspective(2000px) rotateY(-180deg);
- transform: perspective(2000px) rotateY(-180deg);
- }
- }
- @-webkit-keyframes rotate-inverse-back {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(180deg);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(-20deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0);
- }
- }
- @-moz-keyframes rotate-inverse-back {
- 0% {
- -moz-transform: perspective(2000px) rotateY(180deg);
- }
- 70% {
- -moz-transform: perspective(2000px) rotateY(-20deg);
- }
- 100% {
- -moz-transform: perspective(2000px) rotateY(0);
- }
- }
- @keyframes rotate-inverse-back {
- 0% {
- -webkit-transform: perspective(2000px) rotateY(180deg);
- -moz-transform: perspective(2000px) rotateY(180deg);
- -ms-transform: perspective(2000px) rotateY(180deg);
- -o-transform: perspective(2000px) rotateY(180deg);
- transform: perspective(2000px) rotateY(180deg);
- }
- 70% {
- -webkit-transform: perspective(2000px) rotateY(-20deg);
- -moz-transform: perspective(2000px) rotateY(-20deg);
- -ms-transform: perspective(2000px) rotateY(-20deg);
- -o-transform: perspective(2000px) rotateY(-20deg);
- transform: perspective(2000px) rotateY(-20deg);
- }
- 100% {
- -webkit-transform: perspective(2000px) rotateY(0);
- -moz-transform: perspective(2000px) rotateY(0);
- -ms-transform: perspective(2000px) rotateY(0);
- -o-transform: perspective(2000px) rotateY(0);
- transform: perspective(2000px) rotateY(0);
- }
- }
- .a{
- width:166px;
- height:244px;
- background: url('http://img01.taopic.com/141112/267859-14111211514848.jpg') no-repeat;
- background-size: contain;
- }
- .b{
- width:166px;
- height:244px;
- background: url('http://fscomps.fotosearch.com/compc/CSP/CSP213/k2139898.jpg') no-repeat;
- background-size: contain;
- }
- </style>
- </head>
- <body>
- <div style="width:166px;">
- <ul class="pricing-wrapper">
- <li class="is-ended is-hidden">
- <div class="a"></div>
- </li>
- <li class="is-ended is-visible">
- <div class="b"></div>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- $.fn.extend({
- fanzhuan:function(){
- var h = $(this).children('.is-hidden');
- h.addClass('is-selected');
- $(this).addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
- h.addClass('is-visible').removeClass('is-hidden is-selected')
- .siblings().removeClass('is-visible is-selected').addClass('is-hidden');
- $(this).removeClass('is-switched');
- });
- }
- });
- $('.pricing-wrapper').click(function(){
- $(this).fanzhuan()
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43075/8325f86e0a59e80d96fbde94facf2fae.html