jq实现瀑布流效果

<!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>
</body>
</html>

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

RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
[Android Pro] RecyclerView实现瀑布流效果（二）
referece to : http://blog.csdn.net/u010687392 在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutMa ...
RecyclerView实现瀑布流效果(图文详解+源码奉送)
最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...
用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
css浮动+应用（瀑布流效果的实现）
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现什么是瀑布流效果首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

随机推荐

20169210《Linux内核原理与分析》第五周作业
本次内容分为两部分,第一部分是实验,第二部分是教材的第四章和第六章. 第一部分:实验本次的实验内容是构造一个简单的Linux系统MenuOS,过程如下. 首先使用如下命令进入LinuxKernel ...
Java的JDBC事务详解(转)
事务的特性: 1) 原子性(atomicity):事务是数据库的逻辑工作单位,而且是必须是原子工作单位,对于其数据修改,要么全部执行,要么全部不执行. 2) 一致性(consistency):事务在完 ...
MyEclipse10.0安装jad反编译插件
1.下载反编译工具jad(下面提供下载) 将下载下来的jadstar158.zip解压缩,将jad.exe文件放入jdk安装目录下如:C:\Program Files\Java\jdk1.6.0_2 ...
使用 git 进行项目管理(只管理代码，不管理项目配置)
使用Git进行项目管理 1. 从服务器pull项目,本地还原工程从服务器拉取仓库及分支 git clone git@github.com/helloWorld.git git branch -a g ...
【原】个人对win7开机黑屏只有鼠标排障总结
个人对win7开机黑屏只有鼠标排障总结文:铁乐猫第一种情况是explorer.exe进程丢失或损坏有关: 判断方法是按Ctrl+Alt+Del键能呼出任务管理器,结束explorer.exe进程, ...
蓝灯官网下载，蓝灯最新版下载，Lantern（蓝灯）
蓝灯官网下载,蓝灯最新版下载,Lantern(蓝灯)下载 >>>>>>>>>>>>>>>>>> ...
Ajax无刷新提交表单和显示
ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
(转)C#中的泛型
来源:http://www.cnblogs.com/JimmyZhang/archive/2008/12/17/1356727.html .Net 1.1版本最受诟病的一个缺陷就是没有提供对泛型的支持 ...
YesNo列
比较,注意两边类型是否一致,以及boolean类型tostring之后的值 if(item["IsShow"].ToString() == "True")
java 反射 - 获取成员变量的值.
通过反射,可以获取所有声明的成员变量(包括所有的),代码如下: package spt.test.src; public class Person { private String name = &q ...

jq实现瀑布流效果

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

随机推荐

热门专题