mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
114 lines
4.2 KiB
HTML
Executable File
114 lines
4.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Flip</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.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.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="container">
|
|
<div class="side" id="store">
|
|
<button class="toggle">Library</button>
|
|
</div>
|
|
|
|
<div class="side" id="library">
|
|
<button class="toggle">Store</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var effect = kendo.fx("#container").flipHorizontal($("#library"), $("#store")).duration(1000),
|
|
reverse = false;
|
|
|
|
$(".toggle").click(function() {
|
|
effect.stop();
|
|
reverse ? effect.reverse() : effect.play();
|
|
reverse = !reverse;
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#container {
|
|
position: relative;
|
|
width: 308px;
|
|
height: 468px;
|
|
margin: 0 auto;
|
|
border: 22px solid #000;
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 0 2px #ccc;
|
|
}
|
|
|
|
.side {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.side button {
|
|
background: transparent;
|
|
border-style: none;
|
|
border-radius: 3px;
|
|
margin: 8px 0 0 9px;
|
|
color: #fff;
|
|
line-height: 18px;
|
|
padding: 3px 9px 4px;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#library {
|
|
background-image: url(../content/web/fx/library.jpg);
|
|
}
|
|
|
|
#library button {
|
|
background: -moz-linear-gradient(top, rgba(154,107,61,0.85) 0%, rgba(154,107,61,0.4) 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(154,107,61,0.85)), color-stop(100%,rgba(154,107,61,0.4)));
|
|
background: -webkit-linear-gradient(top, rgba(154,107,61,0.85) 0%,rgba(154,107,61,0.4) 100%);
|
|
background: -o-linear-gradient(top, rgba(154,107,61,0.85) 0%,rgba(154,107,61,0.4) 100%);
|
|
background: -ms-linear-gradient(top, rgba(154,107,61,0.85) 0%,rgba(154,107,61,0.4) 100%);
|
|
background: linear-gradient(to bottom, rgba(154,107,61,0.85) 0%,rgba(154,107,61,0.4) 100%);
|
|
-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.28), inset 0 0px 0 1px rgba(0,0,0,.28);
|
|
-moz-box-shadow: 0 0 0 1px rgba(255,255,255,.28), inset 0 0px 0 1px rgba(0,0,0,.28);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,.28), inset 0 0px 0 1px rgba(0,0,0,.28);
|
|
}
|
|
|
|
#store {
|
|
background-image: url(../content/web/fx/store.jpg);
|
|
}
|
|
|
|
#store button {
|
|
background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(39,39,39,1) 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(39,39,39,1)));
|
|
background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(39,39,39,1) 100%);
|
|
background: -o-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(39,39,39,1) 100%);
|
|
background: -ms-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(39,39,39,1) 100%);
|
|
background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(39,39,39,1) 100%);
|
|
-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 0px 0 1px rgba(0,0,0,.40);
|
|
-moz-box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 0px 0 1px rgba(0,0,0,.40);
|
|
box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 0px 0 1px rgba(0,0,0,.40);
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|