HTML+CSS页面滚动效果处理

最新推荐文章于 2024-02-02 19:02:47 发布

weixin_30488313

最新推荐文章于 2024-02-02 19:02:47 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xibei666/p/4823853.html

版权

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>