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/1.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:100%;
        margin:10px 0;
        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=0; 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%=4;
                        move();                    
                    },3000)    ;
                });
                
                play=setInterval(function()
                {
                    
                    indexc++;
                    indexc%=4;
                    move();
                    
            },3000)    ;
            
            function move()
            {
                $("#btn ul li").eq(indexc).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0');
                
                $("#banner").animate({'background-position-y':-390*indexc+'px'},500);
            }                        
        });
</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方向，扩散半径，以及阴影颜色；

 

posted @ 2015-09-20 18:00  jiajinhao  阅读(4187)  评论(0)  编辑  收藏  举报