当当网首页小技能_Javascript

这其中,我只做了我的当当,当鼠标移过我的当当,会出现下来框

具体的代码实现。

// JavaScript Document
$(function(){
    /*当鼠标指针穿过元素时，会发生 mouseenter 事件,
        该事件大多数时候会与 mouseleave 事件一起使用。
      用法：
      mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
      mouseenter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
    */
    $("li#menu").mouseenter(function(){
        $("#dd_menu_top_down").slideDown(500);
    }).mouseleave(function(){
        $("#dd_menu_top_down").slideUp(500);
    });
    //slideDown()显示元素,slideUp是隐藏元素,()里面可以放代表毫秒数的时间,也可以直接放数字,都是以毫秒位单位
});

 

这是滚动广告框,也是小网站中常看见的,

具体代码实现：

    //滚动广告框
    /*
        当用户滚动指定的元素时，会发生 scroll 事件。
        scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
        scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
    */
    $(window).scroll(function(){    
        var top=$(this).scrollTop();
        $("#right").css("top",top+100);
    });
    $("#dd_close").click(function(){
        $("#right").css("display","none");
    });

 

这是轮换图片功能,

具体代码实现：

    //轮换图片
    function changeImg(){
        var index=0;   //index初始为0
        var stop=false;//动画开始
        //获取#content下一个#scroll_img元素的字元素li
        var $li=$("#content").find("#scroll_img").children("li");
        //获取#content下一个#scroll_number的子元素li
        var $page=$("#content").find("#scroll_number").children("li");
        //让page元素从0开始,添加scroll_number_over类型,动画停止,同邻元素删除类样式scroll_number_over
        $page.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
        //鼠标移过li元素函数
        $page.mouseover(function(){
            //动画停止,
            stop=true;
            //动画停止时,获取$page中下表,给index
            index=$page.index($(this));
            //当$li的标签收到index中的值,使动画停止,$li中的图片淡入,它的同辈元素淡出
            $li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
            //当前对象添加类样式,动画停止,删除同辈元素的类样式
            $(this).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
        }).mouseout(function(){
            //鼠标引出使,动画开始
            stop=false;
        });
        //根据它的周期性来循环函数
        setInterval(function(){
            //如果动画停止就跳出
            if(stop) return;
            //否侧，index值每次加1
            index++;
            //如果index值大于或小于等于$li的长度，index值等于0
            if(index>=$li.length){
            index=0;
        }
        //当$li的标签收到index中的值,使动画停止,$li中的图片淡入,它的同辈元
        $li.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
        //当$page元素收到index添加一个类样式,删除同辈元素类样式
        $page.eq(index).addClass("scroll_number_over").stop(true,true).siblings().removeClass("scroll_number_over");
        //三秒执行一次,function函数
    },3000);

最新上架显示的图片广告

代码具体实现

//最新上架显示的图片广告
    //获取#bookTab的子类元素,在获得子类的后代id元素
    $("#bookTab").children(".book_new").find("[id]").mouseover(function(){
        //获取当前对象的id值加上#book,一起赋给book
        var book="#book_"+$(this).attr("id");
        //使#bookTab的子类元素.book_class的后代id元素隐藏
        $("#bookTab").children(".book_class").find("[id]").hide();
        //给当前元素添加一个类样式,紧邻元素删除类样式
        $(this).addClass("book_type_out").siblings().removeClass("book_type_out");
        //显示book
        $(book).show();
    });

 

跑马灯效果

 

具体的代码实现

   function movedome(){
        var marginTop=0;
        var stop=false;
        var interval=setInterval(function(){
            if(stop) return;
            $("#express").children("li").first().animate({"margin-top":marginTop--},0,function(){
                var $first=$(this);
                if(!$first.is(":animated")){
                    if((-marginTop)>$first.height()){
                        $first.css({"margin-top":0}).appendTo($("#express"));
                        marginTop=0;
                    }
                }
            });
        },50);
        $("#express").mouseover(function(){
            stop=true;
        }).mouseout(function(){
            stop=false;
        });
    }