本文介绍了一种通过HTML和JavaScript实现月全食动画的方法。利用一组月相变化的图片，通过控制背景位置来模拟月全食的过程。该方案包括图片滚动与自动播放功能。
此次月全食效果原理：
用一组月全食的图片，让图片在x周上移动，从而做出月全食的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "content-type" content ="text/html;
charset=utf-8" />
<title> 2011-06-16月全食</title >
<style type= "text/css">
.moon {background: url("images/strip.jpg")
0 0px no-repeat;height: 112px;width: 112px;overflow :hidden;display:block;}
.moon_scroll { height: 200px; width: 500px;overflow :auto;display:none;}
</style>
</head>
<body>
<div class= "moon" id ="moon"></ div>
<div class= "moon_scroll" id ="moon_scroll" >
<img src= "http://mat1.gtimg.com/hb/sucai/eclipse/spacer.jpg" style=" height: 1px; width: 1670px; display: block;" /> <!--(13104
/ 112) * 10 + 500-->
</div>
<div id= "scrollLeft"></div >
<script type= "text/javascript">
(function(){
var w
= 13104; /*照片总长度*/
var step
= parseInt(w / 112,10);/*小图片总数*/
var method
= new Object();
method.index = 0;
method.running = function(){
if (method.index
>= step) {document.getElementById('moon_scroll' ).style.display
= 'block';return;}/*如果当前走过的照片数大于等于总照片数，则显示为块级元素*/
document.getElementById('moon' ).style.backgroundPosition
= '-' + (112
* method.index) + 'px 0';
method.index++;
setTimeout(method.running,100); /*每个100毫秒运行一次method.running*/
}
method.running();
})();
(function(){
document.getElementById( 'moon_scroll').onscroll
= function ()
{
var left
= Math.round((this.scrollLeft)
/ 10);
left = Math.min(13104/112-1,left);left = Math.max(0,left);
document.getElementById('moon' ).style.backgroundPosition
= '-' + left*112
+ 'px 0 '
document.getElementById( 'scrollLeft').innerHTML
= left;
}
})();
</script>
</body>
</html>
运行结果：
（1）运行过程中：
（2）运行结束后：
当点击左右的箭头时，滚动条会随之滑动，并且图片也会随之移动。
其中，图片strip.jpg为：
扫一扫
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
