jquery实现html视差特效

此作品是一款jquery实现html视差特效，也是网友啁甍晟的分享到Jqueryschool网站上的第一款作品，现在网站的视差特效都是差不多的，大家好好利用哦。。。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

首先引用文件

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

核心代码

$(document).ready(function() {
      var obg = $('.bg').height();
      var vLen = 0;
      var oscrolltop;
      $('#one').addClass('content');
      $(window).scroll(function(){
            oscrolltop = $(window).scrollTop();
            var num = Math.floor(oscrolltop/obg);
            var movescroll =(oscrolltop/2)+50;
            var coords ='center'+' '+movescroll+'px';
            $(".nav3").css("backgroundPosition",coords);
            $(".btn li:eq("+num+")").addClass('selected').siblings('li').removeClass('selected');
             $('.bg').eq(num).addClass('content').siblings('.bg').removeClass('content');
          });
           
        $('.btn li').click(function(){
              if($(this).index()==0){
                $('body,html').animate({scrollTop:$('#one').offset().top},2000);
            }
            else if($(this).index()==1){
                $('body,html').animate({scrollTop:$('#two').offset().top},2000);
                }
            else{
                $('body,html').animate({scrollTop:$('#three').offset().top},2000); 
            }
            }); 
});