<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jq.js"></script>
<script src="js/ko.js"></script>
<script src="js/index.js"></script>
<style>
.container {
width: 620px;
height: 415px;;
display: -ms-grid;
-ms-grid-columns: 5px (200px 5px)[3];
-ms-grid-rows: 5px (200px 5px)[2];
border: 1px solid red;
}
.item {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;;
border: 1px solid deepskyblue;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
50% {
transform: scale(1.5) rotateX(90deg) ;
}
100% {
opacity: 1;
}
}
.item:hover {
}
.container .item:first-child {
-ms-grid-column: 2;
-ms-grid-row: 2;
background-image: linear-gradient(45deg,yellow 0%,green 50%,blue 100%);
}
.container .item:nth-child(2) {
-ms-grid-column: 4;
-ms-grid-row: 2;
background-image: linear-gradient(225deg,yellow 0%,green 50%,blue 100%);
}
.container .item:nth-child(3) {
-ms-grid-column: 6;
-ms-grid-row: 2;
background-image: radial-gradient(circle,yellow 0%,green 50%,blue 100%);
}
.container .item:nth-child(4) {
-ms-grid-column: 2;
-ms-grid-row: 4;
background-image: radial-gradient(ellipse,yellow 0%,green 50%,blue 100%);
}
.container .item:nth-child(5) {
-ms-grid-column: 4;
-ms-grid-row: 4;
background-image: radial-gradient(farthest-side at 40px 40px,yellow 0%,green 50%,blue 100%);
}
.container .item:nth-child(6) {
-ms-grid-column: 6;
-ms-grid-row: 4;
background-image: repeating-radial-gradient(closest-side at 40px 40px,yellow 0%,green 50%,skyblue 100%);
}
</style>
</head>
<body>
<div class='container' data-bind='foreach:people'>
<div class='item' data-bind='text:item'>
</div>
</div>
</body>
</html>
$(function () {
// window['vm'] = {};
/*var nav = new G.nav('resources/data/nav.json');
nav.getViewModel(function (viewModel) {
vm = viewModel;
ko.applyBindings(vm);
})
*/
var items = function (item) {
this.item = item;
}
var vm = {
people: [
new items('1'),
new items('2'),
new items('3'),
new items('4'),
new items('5'),
new items('6')
]
}
ko.applyBindings(vm);
jQuery('.item:eq(5)').mouseover(function (e) {
var me = $(this);
var i = 40;
setInterval(function () {
i++;
me.css("background-image", "repeating-radial-gradient(closest-side at " + i + "px " + i + "px,yellow 0%,green 50%,skyblue 100%)");
}, 100)
})
})
