HTML+CSS页面滚动效果处理

HTML+CSS代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
    body,ul,li{ margin:0px; padding:0px;}
    body{ background:url(img/bg.jpg) center; }
    #banner{
        width:730px;
        height:390px;
        /*border:solid 1px #ff0;*/
        margin:100px auto 0px;
         background-image:url(img/.png);
         border-radius:10px;
         box-shadow:0px 0px 15px #fff;
    }
    #btn{
       width:55px;
       height:280px;
       position:fixed;
       right:30px;
       top:150px;
        }
    #btn ul li{
        list-style:none;
        width:55px; height:55px;
        border-radius:%;
        margin:10px ;
        background-image:url(img/icon.jpg);
        cursor:pointer;
        }
</style>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
    $(function(){
        var indexc=; var play=null;
            $("#btn ul li").click(function(){
                    clearInterval(play);
                    indexc=$(this).index();
                    /*$(this).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0');

                    $("#banner").animate({'background-position-y':-390*indexc+'px'},500);*/
                    move();
                    play=play=setInterval(function()
                    {
                        indexc++;
                        indexc%=;
                        move();
                    },)    ;
                });

                play=setInterval(function()
                {

                    indexc++;
                    indexc%=;
                    move();

            },)    ;

            function move()
            {
                $("#btn ul li").eq(indexc).animate({'background-position-x':'-80px'},).siblings().css('background-position-x','');

                $("#banner").animate({'background-position-y':-*indexc+'px'},);
            }
        });
</script>
</head>

<body>
    <div id="banner">
    </div>
    <div id="btn">
        <ul>
            <li></li>
            <li style="background-position-y:56px;"></li>
            <li  style="background-position-y:126px;"></li>
            <li style="background-position-y:-70px;"></li>
        </ul>
    </div>
</body>
</html>

完整素材和代码下载

总结：

1、页面调整背景图片位置，background-position 这个属性很重要；通过调整这个属性的值可以实现各个布局的不同位置图片；

2、图片的滚动效果，我们可以使用setInterval来定义计时器，同时可以通过clearInterval清理计时器；

3、背景区域的发光效果，我们可以通过box-shadow来设置，该属性传入四个参数：偏移X方向，偏移Y方向，扩散半径，以及阴影颜色；