有趣的格子效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * { padding: 0px; margin: 0px; }
        html, body { width: 100%; height: 100%; }
        .container { width: 100%; height: 100%; }
            .container .box { width: 10%; height: 10%; text-align:center; color:white; font-size:large; float: left; }
    </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <script type="text/javascript">
        var ViewModel = {
            arr: new Int32Array(100),
            randomColor: function () {
                //16进制方式表示颜色0-F
                var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
                var strHex = "#";
                var index;
                for (var i = 0; i < 6; i++) {
                    //取得0-15之间的随机整数
                    index = Math.round(Math.random() * 15);
                    strHex += arrHex[index];
                }
                return strHex;
            }
        };
        $(function () {
            ko.applyBindings(ViewModel);
            //,text:parseInt($index()/10)+‘, ‘+$index()%10
        });
    </script>
</head>
<body>
    <div class="container" data-bind="foreach:arr">
        <div class="box" data-bind="style:{‘backgroundColor‘:ViewModel.randomColor()}"></div>
    </div>
</body>
</html>

没有头绪时,看一下。

时间: 2024-11-03 19:00:01

有趣的格子效果的相关文章

WPF 有趣的动画效果

WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至于我最后做了之前从未打算做的东西,就是使用一些很实用的.NET代码,渐变填充生成背景动画.让我先给你看一些终于效果吧. WPF和元素定位 然而.在我们開始之前.我们须要考虑一件事情.这件事让我也有点原地转圈的感觉. 似乎当你使用WPF创建不论什么闭环形状时,你不能设置它的X和Y坐标.好吧.至少你不能在一般的WPF窗口(像VS开箱即

Android 分享一个简单有趣的动画效果

本期开始于大家分享几个简单又有趣的动画 效果图: 效果还是不错的,而实现起来也并没有多大的难度,上代码喽 public int id[] = { R.drawable.fengjing_1, R.drawable.fengjing_2, R.drawable.fengjing_3, R.drawable.fengjing_4, R.drawable.fengjing_5, R.drawable.fengjing_6 }; public String list[] = { "一", &q

一个有趣的动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; margin: 100px auto; background-color:rgba(255,0,0,.7); border-radi

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网

精选12个时尚的 CSS3 效果【附源码下载】

精选12个时尚的 CSS3 效果[附源码下载] 这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript 代码才能实现的效果,如今只需要简单的写几句 CSS3 代码就能实现. 超炫的 CSS3 页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 源码下载 

酷毙了!三种风格的全屏幻灯片效果【附源码下载】

今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片.这里需要组合使用 CSS3 的3D转换.过渡和动画功能.除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载      在线演示

【转载】Web 开发中很实用的10个效果【附源码下载】

超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.美女很养眼吧 :) 源码下载      在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推

(转)利用 SVG 和 CSS3 实现有趣的边框动画

原文地址 今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果.当鼠标经过网格元素时,会有一个微妙的动画发生--网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果.这种效果是通过JS给span标签的宽或者高做了动画.我们待会会用SVG和CSS渐变来完成.注意,这个技术还是实验性的. 首先,让我们来看看基本的概念,然后我们会朝着这个方向努力. 请注意,我们将在SVG上使用CSS过渡,可能无法得到所有浏览器的支持. 乍眼一看可能不明白这个效果是怎么完成

网站开发中必备的8个 jQuery 效果【附源码】

jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuery 插件可供使用.看看下面这些惊人的功能和效果,我相信你会发现一些很有用的东西. 基于 jQuery 实现的 Ajax 异步分页 jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等 源码下载      在线演示 老牌的响应式 jQuery 幻灯片效果 Sl