<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>钟表</title>
<style type="text/css" id="css">
    #clock{width:200px;height:200px;border:2px solid #333333;margin:100px auto;border-radius:50%;position: relative;
            box-shadow: 0 0 10px #FCE300; background:url(1.jpg) no-repeat;background-size: 200px 200px;}
    #clock ul{margin: 0;padding: 0;list-style: none;height:200px;position: relative;}
    #clock ul li{background: #010101;width: 2px;height: 6px;position: absolute;left:99px;top:0;
                -webkit-transform-origin:center 100px;-moz-transform-origin:center 100px;
                -ms-transform-origin:center 100px;-o-transform-origin:center 100px;
                transform-origin:center 100px;}
    #clock ul li:nth-of-type(5n+1){height:10px;}    
    #hour{width: 6px;height: 35px;background: #f00;position: absolute;left: 97px;top:65px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    #min{width: 4px;height: 55px;background: blue;position: absolute;left: 98px;top:45px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}
    #sec{width: 2px;height: 80px;background: orange;position: absolute;left: 99px;top:20px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    .Icon{position: absolute;left: 95px;top:95px;width: 10px;height: 10px;background:#242424;border-radius: 50%;}

</style>
<script type="text/javascript">
    window.onload=function(){
        var oCss = document.getElementById("css");
        var oClock = document.getElementById("clock");
        var oHour = document.getElementById("hour");
        var oMin = document.getElementById("min");
        var oSec = document.getElementById("sec");
        var oUl = oClock.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var str = "";
        var sCss = "";
        for(var i=0;i<60;i++){
            //var oLi = document.createElement('li');
            //oUl.appendChild(oLi);
            str+="<li></li>";
            sCss+="#clock ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+6*i+"deg);-moz-transform:rotate("+6*i+"deg);-ms-transform:rotate("+6*i+"deg);-o-transform:rotate("+6*i+"deg);transform:rotate("+6*i+"deg);}";
        }
        oUl.innerHTML = str;
        oCss.innerHTML += sCss;
        setInterval(time,1000);
        time();
        function time(){
            var oDate = new Date();    
            var aSec = oDate.getSeconds();
            var aMin = oDate.getMinutes()+aSec/60;
            var aHour = oDate.getHours()+aMin/60;    
            
            oHour.style.WebkitTransform = "rotate("+aHour*30+"deg)";
            oMin.style.WebkitTransform = "rotate("+aMin*6+"deg)";
            oSec.style.WebkitTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MozTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MozTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MozTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MsTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MsTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MsTransform = "rotate("+aSec*6+"deg)";
            oHour.style.OTransform = "rotate("+aHour*30+"deg)";
            oMin.style.OTransform = "rotate("+aMin*6+"deg)";
            oSec.style.OTransform = "rotate("+aSec*6+"deg)";
            oHour.style.transform = "rotate("+aHour*30+"deg)";
            oMin.style.transform = "rotate("+aMin*6+"deg)";
            oSec.style.transform = "rotate("+aSec*6+"deg)";
        }
        
    }
</script>
</head>
<body>
    <div id="clock">
        <ul>
            
        </ul>

<div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>

<div class="Icon"></div>

</div>
</body>
</html>

jq实现瀑布流效果的更多相关文章

  1. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  2. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  3. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  4. [Android Pro] RecyclerView实现瀑布流效果（二）

    referece to : http://blog.csdn.net/u010687392 在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutMa ...

  5. RecyclerView实现瀑布流效果(图文详解+源码奉送)

    最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...

  6. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  7. css浮动+应用（瀑布流效果的实现）

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  9. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

随机推荐

  1. Socket程序中的Error#10054错误

    近期使用winSock做的一个网络项目中,使用TCP+Socket连接编写的一个多线程的网络程序,功能是client负责不断地向server端发送数据,服务端负责接收数据.client是一个DLL,服 ...

  2. Java GC 概念摘要

    很长时间,我想Java的GC做一个小小的总结,他有没有时间.根据最近看了java paper向上java gc文章,我觉得好,读读.顺便说一下,总结下. java paper的GC文章地址,里面有非常 ...

  3. HDU 5046 Airport ( Dancing Links 反复覆盖 )

    今年上海网络赛的一道题目 , 跟 HDU 2295 如出一辙 . 就是距离的计算一个是欧几里得距离 , 一个是曼哈顿距离 学完DLX感觉这题好水 ,就是一个裸的反复覆盖 注意下别溢出即可了 #incl ...

  4. careercup-数组和字符串1.2

    1.2 用C或C++实现void reverse(char *str)函数,即反转一个null结尾的字符串. C++实现代码: #include<iostream> #include< ...

  5. WIN32 根据程序名(映像名称)终止外部程序

    场景: 1.有时候需要调用外部程序,但是外部程序有可能崩溃挂起,这样这个进程就没法结束,所以再在下次调用前需要先结束之前调用的. 2.没考虑到权限问题,应该是只能终止当前用户启动的进程. #inclu ...

  6. java反射性能

    项目中用到了java的反射,可以大大减少代码量.但是反射的性能却不容乐观,做了个简单的测试,如下. public void noreflect() { Person p = new Person(); ...

  7. Java泛型方法定义及泛型类型推断

    泛型的推断 @Test public void test3(){ //类型推断时使用两个类型的最小公倍数 int x1 = add(3,4); Number x2 = add(3.5,4); Obje ...

  8. log4net日志组件

    转载:http://www.cnblogs.com/knowledgesea/archive/2012/04/26/2471414.html 一.什么是log4net组件 Log4net是基于.net ...

  9. EnumWindows 使用

    转载自csdn:http://blog.csdn.net/hairi/article/details/548064   EnumWindows 用来列举屏幕上所有顶层窗口. MSDN原话: The E ...

  10. 使用graphics2D给图片上画字符

    //读取图片BufferedImage frontImage = ImageIO.read(new File(eCardXMLConfigManager.geteCardXMLConfigManage ...