jq实现瀑布流效果-白红宇

jq实现瀑布流效果

阅读量：5245 次

发布时间：2019-06-14

本文共 3494 字，大约阅读时间需要 11 分钟。

<!doctype html>

<html>

<head>

#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>

window.οnlοad=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>

<ul>

</ul>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/jiechen/p/4976308.html

你可能感兴趣的文章

深入浅出JavaScript(2)—ECMAScript

查看>>

STEP2——《数据分析：企业的贤内助》重点摘要笔记（六）——数据描述

查看>>

ViewPager的onPageChangeListener里面的一些方法参数：

查看>>

Jenkins关闭、重启，Jenkins服务的启动、停止方法。

查看>>

CF E2 - Array and Segments (Hard version) （线段树）

查看>>

Linux SPI总线和设备驱动架构之四：SPI数据传输的队列化

Zerver是一个C#开发的Nginx+PHP+Mysql+memcached+redis绿色集成开发环境

查看>>

多线程实现资源共享的问题学习与总结

查看>>

Learning-Python【26】：反射及内置方法

查看>>

torch教程[1]用numpy实现三层全连接神经网络

查看>>