前端练习1-月全食效果

来源：互联网发布：网络舆情培训班通知编辑：程序博客网时间：2024/05/16 00:35

此次月全食效果原理：

用一组月全食的图片，让图片在x周上移动，从而做出月全食的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<head>

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

(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为：

0 0