All Components

Effects / Replace

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Replace</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 class="demo-section wide"> 
    <div id="placeholder"> 
     <img id="home0" src="../content/web/fx/replace/home1.jpg"> 
     <img id="home1" style="display: none" src="../content/web/fx/replace/home2.jpg"> 
     <img id="home2" style="display: none" src="../content/web/fx/replace/home3.jpg"> 
    </div> 
    <ul id="homes"> 
     <li><a id="thumb1" data-index="0" href="#"><span>Home 1</span></a></li> 
     <li><a id="thumb2" data-index="1" href="#"><span>Home 2</span></a></li> 
     <li><a id="thumb3" data-index="2" href="#"><span>Home 3</span></a></li> 
    </ul> 
   </div> 
   <script type="text/javascript" charset="utf-8">
            $(function() {
                var index = 0,
                    currentEffect;

                $("#homes a").click(function(e) {
                    e.preventDefault();
                    var target = parseInt($(this).data("index"));
                    if (target === index) {
                        return;
                    }

                    if (currentEffect) {
                        currentEffect.stop();
                    }
                    $("#home" + target).show();
                    currentEffect = kendo.fx("#home" + target).replace("#home" + index, "swap");
                    currentEffect.run();
                    index = target;
                });
            });

        </script> 
   <style>
            #placeholder {
                display: inline-block;
                width: 500px;
                height: 333px;
                position: relative;
            }
            #placeholder img {
                position: absolute;
            }

            #homes {
                display: inline-block;
                width: 160px;
                height: 333px;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #homes li {
                margin: 0;
                padding: 0;
            }
            #homes li a {
                display: block;
                width: 160px;
                height: 109px;
                margin: 3px 0;
                box-shadow: inset 0 0 10px rgba(0,0,0,.5);
            }
            #homes li a:hover {
                box-shadow: inset 0 100px 100px rgba(0,0,0,.3);
            }
            #homes li a#thumb1 {
                margin: 0 0 3px;
            }
            #homes li a span {
                display: none;
            }

            #thumb1 {
                background: url('../content/web/fx/replace/t1.jpg') no-repeat left top;
            }
            #thumb2 {
                background: url('../content/web/fx/replace/t2.jpg') no-repeat left top;
            }
            #thumb3 {
                background: url('../content/web/fx/replace/t3.jpg') no-repeat left top;
            }

            /**
             * Custom swap effect
             */

            /* the initial position of the next div */
            .k-fx-swap.k-fx-start .k-fx-next {
                -webkit-transform: translatex(100%);
                -moz-transform: translatex(100%);
                -ms-transform: translatex(100%);
                transform: translatex(100%);
            }

            /* the initial position of the next div */
            .k-fx-swap.k-fx-end .k-fx-current {
                opacity: 0;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                transform: scale(0.9);
            }


            /* Reverse animation */

            /* the initial position of the next div */
            .k-fx-swap.k-fx-reverse.k-fx-start .k-fx-next {
                opacity: 0;
                -webkit-transform: scale(0.9);
                -moz-transform: scale(0.9);
                transform: scale(0.9);
            }

            /* the initial position of the next div */
            .k-fx-swap.k-fx-reverse.k-fx-end .k-fx-current {
                opacity: 1;
                -webkit-transform: translatex(100%);
                -moz-transform: translatex(100%);
                transform: translatex(100%);
            }

        </style> 
  </div>   
 </body>
</html>