<!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) }) })