您的位置：首页 > 其它

图片滑动时钟

2016-03-02 21:21 375 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fl{
float: left;
}
img{
display: block;
position: relative;
}
div{
width: 123px;
height: 173px;
overflow: hidden;
}
</style>
<script>
window.onload = function(){
function toDou(n){
return n<10?'0'+n:''+n;
}
function toMove(obj,value,M){
var aImg = obj.getElementsByTagName('img');
var    t=0;
var timer=null;
if(value<0){value = M-1;}
//console.log(value);
aImg[0].style.top=aImg[1].style.top=t+'px';
aImg[0].src = 'img/'+value+'.jpg';
aImg[1].src = 'img/'+(value+1)%M+'.jpg';

clearInterval(timer);
timer = setInterval(function(){
t-=10;
aImg[0].style.top=aImg[1].style.top=t+'px';

if(t<-163){
clearInterval(timer);
}
},30);
}
function time(){
var oDate = new Date();
var oS = oDate.getSeconds();
var oH = oDate.getHours();
var oM = oDate.getMinutes();
var str = toDou(oH)+toDou(oM)+toDou(oS);
//console.log(str);
for(var i=0;i<str.length;i++){
if(aDiv[i].index != str.charAt(i)){
toMove(aDiv[i],str.charAt(i)-1,arr[i]);
//alert(i);
}
aDiv[i].index = str.charAt(i);
}
}

var aDiv = document.getElementsByTagName('div');
var oColon1 = document.getElementById('colon1');
var oColon2 = document.getElementById('colon2');
arr = ['3','4','6','10','6','10'];
var onOff = true;

time();
setInterval(time,1000);
setInterval(function(){
onOff=!onOff;

if(onOff){
oColon1.src=oColon2.src='img/black.jpg';
}else{
oColon1.src=oColon2.src='img/colon.jpg';
}

},500);
};
</script>
</head>
<body>
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<img src="img/colon.jpg" alt="" class="fl" id="colon1">
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<img src="img/colon.jpg" alt="" class="fl" id="colon2">
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<div class="fl">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
</body>
</html>

效果图如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航