6月A项目的总结

对JS效果的要求有几点：

1.顶部导航栏鼠标经过动画。

2.Slider轮播图带有左右箭头，底部有缩略图，缩略图和大图都会自动播放。

3.右侧有个三个按钮的导航菜单，第一个按钮回到整个页面顶部，第二个按钮向上遍历锚点，第三个按钮向下遍历锚点。导航菜单要在HTML的一个DIV内部FIXED滑动。  

思路如下：

1.鼠标经过的动画，用JQUERY的animate做两个方法，一个用于mouseover，一个用于mouseout

像这样：

function _imgOver(id)

{　　var _id="#"+id;

　　$(_id).animate({ opacity:1}, 500 );
}

HTML结构方面就是给渐变的目的图片存在的HTML结构一个id，初始图片在目的图片的下面，同时显示于静态页面上，静态让目的图片opacity:0; filter:alpha(opacity=0)而隐藏着，在原始图片存在的HTML层容器上通过鼠标事件触发JS达到效果。 

2.Slider 的做法有很多种。慢点总结。

3.浮动的侧导航是花功夫比较多的部分。

首先，如果要固定该菜单于某个DIV内部，就不能用CSS的position:fixed来让它滑动（因为CSS这个属性必须相对BODY定位，在浏览器窗口缩放时候，横向位置会跟着浏览器边框改变）。而必须用JS控制它在HTML指定结构内的竖向滑动。

并且，菜单的滑动定位是一个方面，还有菜单上按钮触发的对应锚点指向的正文内容相对于浏览器窗口的位置也是一个需要定位的方面。

控制菜单滑动 锚点遍历.js （可以引用于HEAD）

var c_index = 0;

$(function(){    

    $("#gotop").click(function(){

        $("html,body").animate({scrollTop:0},800);

        c_index=0;

        return false;

    });

});

$(function(){

    $("#pagelist").scrollTo(800);

    //$("#pagelist a").eq(0).click();

    function getcindex(){

        var index = 0;

        $("#pagelist a").each(function(i){

            if($(this).attr("iscurrent")=="true"){

                index = i;

                

            }

        });

        return index;

    }            

    $("#downmenu a").click(function(){        

        if(c_index<$("#pagelist a").length-1)

        {

            c_index ++;

            $("#pagelist a").eq(c_index).click();

        }

        else

        {

            c_index=$("#pagelist a").length-1;

        }

        

        

        return false;

    });

    

    $("#upmenu a").click(function(){

        if(c_index>0) 

        {

            c_index --;

            $("#pagelist a").eq(c_index).click();

        }

        else{c_index=0;}

        

        return false;

    });

});

View Code

控制菜单滑动位置.js （必须在BODY内执行）

$(document).ready(function(){

var timerId;

var $this = $("#menugroup")

$(window).bind('scroll', function(event) {

 // alert(1)

    clearTimeout(timerId);



    timerId = setTimeout(function() {

      var topInit=50;

      var topMove = $(window).scrollTop();

        if(topMove>700){

            topInit=50+topMove-730;

        } 

        $this.

        stop(true, false).

        animate({ top: topInit}, 100 )}, 50);

});});

View Code

控制正文滚动 scrollTo.js （可以引用于HEAD）

(function($){

    $.extend($.fn,{

        scrollTo:function(time,to){

            time=time||800;

            to=to||1;

            $('a[href*=#]', this).click(function(){

                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

                    var $target = $(this.hash);

                    //var $toObj = $(this).attr("toObj");

                    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');

                    //alert($(this).parent().find("a").length);

                    $(this).parent().find("a").removeAttr("iscurrent").removeClass("selected");;

                    if ($target.length) {

                        if (to == 1) {

                            var objHeight = $target.height();

                            var winHeight = $(window).height();

                            var h =0;//如果要居中 (winHeight - objHeight)/2

                            var t = $target.offset().top;//距离浏览器窗口顶部的位移

                            var tt = t-h;//将要滚动的距离

                            $('html,body').animate({

                                scrollTop: tt

                            }, time);

                        }

                        else if(to==2){

                            $('html,body').animate({

                                scrollLeft: $target.offset().left

                            }, time);

                        }else{

                            alert('argument error！');

                        }

                        $(this).attr("iscurrent","true").addClass("selected");

                        return false;

                    }

                }

            });

        }

    });

})(jQuery);

View Code

HTML结构很简单，用a标签href相应文章内容的id名，<a href="#someid"></a>, id="#someid"的HTML元素可以是任何HTML元素，例如li,div。

这样做一个<a href="#someid01"></a><a href="#someid02"></a><a href="#someid03"></a>的列表，用div包起来，比如<div id="pagelist"><a>...</a>...<a>...</a></div>

锚点遍历.js 内的代码就会从c_index=0 即 #someid01 开始遍历该链接列表。

回到顶部不用说，用JQUERY的animation轻而易举：写一个click的函数$("#gotop").click(function(){},内部使用 $("html,body").animate({scrollTop:0},800);语句即可。但要注意的是，为了避免每次从底部回到顶部后，按向下的按钮出现跳到第二，第三内容处（每次加1），所以需要在回到顶部的语句后面将c_index=0清零。见锚点遍历.js内代码。