程序博客网 > linux安装gem命令

时钟+指针移到图片内部放大

来源：互联网发布：linux安装gem命令编辑：程序博客网时间：2024/04/28 10:45

<style type="text/css" id="sty">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
#box ul{
width: 200px;
height: 200px;
position: relative;
}
#box ul li{
width: 2px;
height: 6px;
background: #000;
position: absolute;
left: 99px;
top: 0;
-webkit-transform-origin: center 100px;
}
/*#box ul li:nth-child(2){
-webkit-transform: rotate(6deg);
}
#box ul li:nth-child(3){
-webkit-transform: rotate(12deg);
}*/

#hours{
width: 6px;
height: 45px;
background: #000;
position: absolute;
left: 97px;
top: 55px;
-webkit-transform-origin: bottom;
-webkit-transform: rotate(50deg);
}
#min{
width: 4px;
height: 65px;
background: #0000CC;
position: absolute;
left: 98px;
top: 35px;
-webkit-transform-origin: bottom;
-webkit-transform: rotate(80deg);
}
#sec{
width: 2px;
height: 85px;
background: red;
position: absolute;
left: 99px;
top: 15px;
-webkit-transform-origin: bottom;
-webkit-transform: rotate(180deg);
}
#cro{
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
left: 90px;
top: 90px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.getElementsByTagName('ul')[0];
var aLi=oBox.getElementsByTagName('li');
var oSty=document.getElementById('sty');

var html='';
for(var i=0;i<60;i++){
var oLi=document.createElement('li');
oUl.appendChild(oLi);
html+='#box ul li:nth-child('+(i+1)+'){-webkit-transform: rotate('+i*6+'deg);}';
}

oSty.innerHTML+=html;

//时分秒针的运动

var oHours=document.getElementById('hours');
var oMin=document.getElementById('min');
var oSec=document.getElementById('sec');

date();
setInterval(date,1000);

function date(){
var mydate=new Date();//获取系统时间

//时分秒之间的关系
var iSec=mydate.getSeconds();
var iMin=mydate.getMinutes()+iSec/60;
var iHours=mydate.getHours()+iMin/60;

//设置时分秒针的旋转角度
oSec.style.webkitTransform='rotate('+iSec*6+'deg)';
oMin.style.webkitTransform='rotate('+iMin*6+'deg)';

oHours.style.webkitTransform='rotate('+iHours*30+'deg)';
}
}
</script>
<style>
body{
background: pink;
}
.pic1{
width: 850px;
height: 600px;
margin: 0 auto;
/*margin-top: 150px;*/
}
.pic{
float: left;
width: 275px;
height: 200px;
margin-right: 2px;
margin-bottom: 2px;
border: 1px solid red;
overflow: hidden;
}
img{
width: 275px;
height: 200px;
}
img:hover{
transform:scale(1.5,1.5);
}
</style>
</head>
<body>
<div id="box">
<ul>

</ul>
<div id="hours"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="cro"></div>
</div>
<div class="pic1">
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
<div class="pic"><img src="img/timg.jpg" alt="" /></div>
</div>
</body>

阅读全文

0 0

linux安装gem命令

linux安装gem命令

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子洗眉效果好吗怎样洗眉洗眉水有用吗洗眉后的图片二手洗眉机哪个牌子的洗眉机实用紧急冲淋洗眼器不锈钢洗眼器喷淋洗眼器复合式洗眼器洗眼器报价不锈钢立式洗眼器电加热洗眼器立式洗眼器壁挂式洗眼器复合洗眼器紧急洗眼器便携式洗眼器冲淋洗眼器洗眼器厂家紧急喷淋洗眼器洗眼器的使用方法双口洗眼器实验室洗眼器洗眼器标识移动式洗眼器淋浴洗眼器电伴热洗眼器供应洗眼器厂家洗眼器图片洗眼器生产厂家 stg洗眼器复合式洗眼器价格洗眼器标识牌医用洗眼器移动洗眼器上海洗眼器厂家上海洗眼器希诗顿洗眼器台雄洗眼器应急冲淋洗眼器