All Components

Effects / Tile

Black King
Black Queen
Black Rook
Black Bishop
Black Knight
Black Pawn

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Tile</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="chessboard"> 
    <div class="king"> 
     <span class="icon">♚</span> 
     <span class="description">Black King</span> 
    </div> 
    <div class="queen"> 
     <span class="icon">♛</span> 
     <span class="description">Black Queen</span> 
    </div> 
    <div class="rook"> 
     <span class="icon">♜</span> 
     <span class="description">Black Rook</span> 
    </div> 
    <div class="bishop"> 
     <span class="icon">♝</span> 
     <span class="description">Black Bishop</span> 
    </div> 
    <div class="knight"> 
     <span class="icon">♞</span> 
     <span class="description">Black Knight</span> 
    </div> 
    <div class="pawn"> 
     <span class="icon">♟</span> 
     <span class="description">Black Pawn</span> 
    </div> 
   </div> 
  </div> 
  <style>
    #chessboard {
        background-color: #0e0e0e;
        width: 340px;
        height: 230px;
        margin: 0 auto;
    }
    #chessboard div {
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px 0 0 10px;
        position: relative;
        overflow: hidden;
        background-image: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.2)));
        background-image: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
        background-image: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
        background-image: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
        background-image: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
    }
    #chessboard div .icon {
        font-size: 48px;
        width: 100%;
        height: 100%;
        line-height: 100px;
        position: absolute;
        text-align: center;
        display: block;
        color: #ffffff;
    }

    #chessboard div .description {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        padding-left: 10px;
        top: 70px;
        font-size: 12px;
        color: #ffffff;
    }
    
    .king {
        background-color: #00aba9;
    }
    .queen {
        background-color: #910091;
    }
    .rook {
        background-color: #8cbf26;
    }
    .bishop {
        background-color: #f09609;
    }
    .knight {
        background-color: #a05000;
    }
    .pawn {
        background-color: #1ba1e2;
    }
</style> 
  <script>
    $("#chessboard div").hover(
        function(e) {
            var div = $(e.currentTarget);
            kendo.fx(div.find(".description").css("display", "block")).tile("left", div.find(".icon")).play();
        },

       function(e) {
            var div = $(e.currentTarget);
            kendo.fx(div.find(".description")).tile("left", div.find(".icon")).reverse();
    });
</script>   
 </body>
</html>