项目作业

第一个功能提示动画

 //右侧提示文字
    $("a.tooltip").mouseover(function(e) {
        this.myTitle = this.title;
        console.log(this.myTitle);
        this.title = '';
        var tooltip = "<div id = 'tooltip'>" + this.myTitle + "</div>"
        $("body").append(tooltip);
        var x = 10;
        var y = 20;
        $("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        }).show("fast");
    }).mouseout(function() {
        this.title = this.myTitle;
        $("#tooltip").remove();
    }).mousemove(function(e) {
        var x = 10;
        var y = 20;
        $("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        })
    })

第二个功能
滚动动画

  function showBrandList(index) {
        var $rollobj = $("jnBrandList");
        var rollWidth = $rollobj.find("li").outerWidth();
        rollWidth = rollWidth * 4;
        $rollobj.stop(true, false).animate({
            left: -rollWidth * index
        }, 1000);
    }
    $("#jnBrandTab li a").click(function() {
        $(this).parent().addClass("chos").siblings().removeClass("chos");
        var idx = $("#jinBrandTab li a").index(this);
        showBrandList(idx);
        return false;
    }).eq(1).click();
    $("#jnBrandList li").each(function(index) {
        var $this = $(this);
        var $img = $this.find("img");
        setTimeout(function() {
            var img_w = $img.width();
            var img_h = $img.height();
            var spanHtml = '<span       ' + 'style = "position:absolute;top:0;left:17px;width:' + img_w + 'px;height:' + img_h + 'px;" class = "imageMask></span>';
            $(spanHtml).appendTo($this);
        }, 1700);
    });
    $("#jnBrandList").delegate(".imageMask", "mouseenter mouseleave",
        function() {
            $(this).toggleClass("imageOver");
        });
    //滚动动画
    $("#jnBrandTab li a").click(function() {
        $(this).parent().addClass("chos").siblings().removeClass("chos");
        var idx = $("#jnBrandTab li a").index(this);
        showBrandList(idx);
        return false;
    }).eq(0).click();

    function showBrandList(index) {
        var $rollobj = $("#jnBrandList");
        var rollWidth = $rollobj.find("li").outerWidth();
        rollWidth = rollWidth * 4;
        $rollobj.stop(true, false).animate({
            left: -rollWidth * index
        }, 1000);
    }

第三个功能
放大镜功能

//滑过图片出现放大镜效果
    $("#jnBrandList li").each(function(index) {
        var $img = $(this).find("img");
        var img_w = $img.width();
        var img_h = $img.height();
        var spanHtml = '<span style="position:absolute;top:0;left:5px;width:' + img_w + 'px;height:' + img_h + 'px;" class="imageMask"></span>';
        $(spanHtml).appendTo(this);
    })
    $("#jnBrandList").delegate(".imageMask", "hover", function() {
        $(this).toggleClass("imageOver");
    });

如果放大镜无法正常显示请更改css文件中的该代码



将images改为img

记得写入口函数