$(".item a img").hover(function() {
var tsrc = $(this).attr("src");
var link = $(this).parent().attr("href");
tsrc=tsrc.split('-')[0]+'-260x260.jpg';

$(this).parent().parent().parent().append("<dd class='bigimg'><a href=''><img src = '' /></a></dd>");
$(this).parent().parent().parent().find(".bigimg").find("a").find("img").attr("src",tsrc);
$(this).parent().parent().parent().find(".bigimg").find("a").attr("href",link);
$(this).parent().parent().parent().find(".bigimg").css({position:'absolute',display:'block',overflow:'hidden',width:'260px',height:'260px',"z-index":'20',top:'0',left:'0'});


},function(){

$(this).parent().parent().parent().find(".bigimg").remove();
});
怎样大图出来后就在大图上移动啊,现在看上去好闪啊?也不知这样写对不对,求助大虾帮忙看下。

解决方案 »

  1.   

    hover接受2个参数,第一个类似mouseover,第二个类似mouseout的2个函数。你的代码当大图出来后应该是挡道小图了,就触发了mouseout事件,大图再remove,又触发mouseover,如此就闪起来了。
    可以吧第二个参数放到bigimg上面去$(".item a img").hover(function() {
    var tsrc = $(this).attr("src");
    var link = $(this).parent().attr("href");
    tsrc=tsrc.split('-')[0]+'-260x260.jpg';$(this).parent().parent().parent().append("<dd class='bigimg'><a href=''><img src = '' /></a></dd>");
    $(this).parent().parent().parent().find(".bigimg").find("a").find("img").attr("src",tsrc);
    $(this).parent().parent().parent().find(".bigimg").find("a").attr("href",link);
    $(this).parent().parent().parent().find(".bigimg").css({position:'absolute',display:'block',overflow:'hidden',width:'260px',height:'260px',"z-index":'20',top:'0',left:'0'});
    $(this).parent().parent().parent().find(".bigimg").hover(function(){},function(){
        $(this).remove();
    });
    },function(){
    });
      

  2.   


    $(".item a img").hover(function() {
        var tsrc = $(this).attr("src");
        var link = $(this).parent().attr("href");
        tsrc=tsrc.split('-')[0]+'-260x260.jpg';
        var parent = $(this).parent().parent().parent();
        parent.append("<dd class='bigimg'><a href=''><img src = '' /></a></dd>");
        parent.find(".bigimg").find("a").find("img").attr("src",tsrc);
        parent.find(".bigimg").find("a").attr("href",link);
        parent.find(".bigimg").css({position:'absolute',display:'block',overflow:'hidden',width:'260px',height:'260px',"z-index":'20',top:'0',left:'0'});
        parent.find(".bigimg").hover(function(){},function(){
        $(this).remove();
    });
    },function(){
    });