All Components

Effects / Combined Effects

"Gangnam Style" is a single by the South Korean pop artist PSY. The song was released on July 15, 2012, as the lead single of his sixth studio album PSY 6 (Six Rules), Part 1. "Gangnam Style" debuted at number one on the Gaon Chart, the national record chart of South Korea. As of November 12, 2012, the music video has been viewed over 710 million times on YouTube, and is the site's most watched K-pop video and second most watched video ever.

Source: Wikipedia

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Combined Effects</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div id="music-albums"> 
    <div id="album"> 
     <div id="album-contents"> 
      <p>"Gangnam Style" is a single by the South Korean pop artist PSY. The song was released on July 15, 2012, as the lead single of his sixth studio album PSY 6 (Six Rules), Part 1. "Gangnam Style" debuted at number one on the Gaon Chart, the national record chart of South Korea. As of November 12, 2012, the music video has been viewed over 710 million times on YouTube, and is the site's most watched K-pop video and second most watched video ever. <br><br> Source: <a href="http://en.wikipedia.org/wiki/Gangnam_Style" title="Gangnam Style - Wikipedia">Wikipedia</a> </p> 
     </div> 
     <div id="album-cover"> 
      <img src="../content/web/psy-album.jpg"> 
     </div> 
    </div> 
   </div> 
   <script>
        $(document).ready(function() {
            var el = kendo.fx($("#album")),
                flip = el.flip("horizontal", $("#album-cover"), $("#album-contents")),
                zoom = el.zoomIn().startValue(1).endValue(0.7);

            flip.add(zoom).duration(200);

            $("#album-cover").click(function() {
                flip.stop().play();
            });

            $("#album-contents").click(function() {
                flip.stop().reverse();
            });
        });
    </script> 
   <style>
        #music-albums {
            width: 320px;
            height: 320px;
            margin: 0 auto;
        }
        #album {
            position: absolute;
            width: 320px;
            height: 320px;
            -webkit-transform: scale(0.7);
            -moz-transform: scale(0.7);
            -ms-transform: scale(0.7);
        }
        #album-cover {
            position: absolute;
            width: 300px;
            height: 300px;
            border: 10px solid #626262;
        }
        #album-cover:hover {
            border: 10px solid #ffb100;
        }

        #album-contents {
            position: absolute;
            left: 10px;
            top: 10px;
            background: #2e2e2e;
            color: #ffffff;
            padding: 30px;
            width: 240px;
            height: 240px;
        }

        #album-contents a {
            color: #d8a42e;
        }
    </style> 
  </div>   
 </body>
</html>