jQuery Popup/Popout

我連續有11個圖像，如果鼠標懸停在其中一個上，我想要彈出窗口。所以每個11張圖片都有不同的突出顯示。我已經有了一些代碼來做到這一點，但它只會在第一張圖片上工作。jQuery Popup/Popout

代碼： 的index.html

<span title="Milestones" class="tl-icon"> 
<span class="tl-msg"> 
<span class="tl-msg-inside"> 
<div class="slice1"> 
     <a id="slice1">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice2"> 
     <a id="slice2">Slice 2</a> 
     <em style="top: -70px; display: none;">------</em> 
</div> 
<div class="slice3"> 
     <a id="slice3">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice4"> 
     <a id="slice4">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice5"> 
     <a id="slice5">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice6"> 
     <a id="slice6">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice7"> 
     <a id="slice7">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice8"> 
     <a id="slice8">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice9"> 
     <a id="slice9">RSS Feed</a> 
     <em style="top: -70px; display: none;">---</em> 
</div> 
<div class="slice10"> 
     <a id="slice10">RSS Feed</a> 
     <em style="top: -70px; display: none;">----</em> 
</div> 
<div class="slice11"> 
     <a id="slice11">RSS Feed</a> 
     <em style="top: -70px; display: none;">-----</em> 
</div> 
</span>

的style.css（此處的相同的代碼已經被拷貝11次，一個用於每個popouts /圖像）

* { margin: 0; padding: 0; border: 0; } 

.slice1 { 
    float: left; 
    margin-left: 0px; 
    margin-bottom: 0px; 
    margin-right: 0px; 
    margin-top: 0px; 
    padding: 0; 
    width: 700px; 
    position: relative; 
} 

div.slice1 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 700px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice2 { 
    float: left; 
    margin: 0px auto; 
    padding: 0; 
    width: 130px; 
    position: relative; 
} 

div.slice2 em { 
    font-size: 47px; 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 100px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    z-index: 0; 
    display: none; 
}. 

slice3 { 
    margin: 0px auto; 
    padding: 0; 
    width: 220px; 
    position: relative; 
} 

div.slice3 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 220px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice4 { 
    margin: 0px auto; 
    padding: 0; 
    width: 70px; 
    position: relative; 
} 

div.slice4 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 70px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice5 { 
    margin: 0px auto; 
    padding: 0; 
    width: 250px; 
    position: relative; 
} 

div.slice5 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 250px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice6 { 
    margin: 0px auto; 
    padding: 0; 
    width: 380px; 
    position: relative; 
} 

div.slice6 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 380px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice7 { 
    margin: 0px auto; 
    padding: 0; 
    width: 170px; 
    position: relative; 
} 

div.slice7 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 170px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice8 { 
    margin: 0px auto; 
    padding: 0; 
    width: 30px; 
    position: relative; 
} 

div.slice8 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 30px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice9 { 
    margin: 0px auto; 
    padding: 0; 
    width: 110px; 
    position: relative; 
} 

div.slice9 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 110px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

slice10 { 
    margin: 0px auto; 
    padding: 0; 
    width: 330px; 
    position: relative; 
} 

div.slice10 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 330px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
} 

slice11 { 
    margin: 0px auto; 
    padding: 0; 
    width: 110px; 
    position: relative; 
} 

div.slice11 em { 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat; 
    width: 110px; 
    height: 48px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
}. 

#rss-icon { 
    width: 42px; 
    height: 42px; 
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/icon.png) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice1 { 
    width: 700px; 
    height: 42px; 
    background: url(http://www.kttns.org/yta2) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice2 { 
    width: 130px; 
    height: 42px; 
    background: url(http://www.kttns.org/wexm) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice3 { 
    width: 220px; 
    height: 42px; 
    background: url(http://www.kttns.org/imthi) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice4 { 
    width: 70px; 
    height: 42px; 
    background: url(http://www.kttns.org/wqxnj) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice5 { 
    width: 250px; 
    height: 42px; 
    background: url(http://www.kttns.org/njqxz) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice6 { 
    width: 380px; 
    height: 42px; 
    background: url(http://www.kttns.org/mwi2y) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice7 { 
    width: 170px; 
    height: 42px; 
    background: url(http://www.kttns.org/zlzgm) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice8 { 
    width: 30px; 
    height: 42px; 
    background: url(http://www.kttns.org/djjn) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice9 { 
    width: 210px; 
    height: 42px; 
    background: url(http://www.kttns.org/mmdq) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice10 { 
    width: 330px; 
    height: 42px; 
    background: url(http://www.kttns.org/kodc4) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

#slice11 { 
    width: 110px; 
    height: 42px; 
    background: url(http://www.kttns.org/hyz) no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
}

tooltop.js（使彈出窗口彈出的代碼，對於每個彈出窗口/圖像也是一個）

$(document).ready(function(){ 

    $(".slice1 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice2 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice3 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice4 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice5 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice6 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice7 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice8 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice9 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice10 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

}); 

$(document).ready(function(){ 

    $(".slice11 a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 

});

爲什麼彈出窗口只出現在第一張圖片上？

來源

2009-11-20 Joshua

只是評論你也許可以通過包裝你的所有幻燈片的div到幻燈片div容器並添加類似下面的代碼，而不是重複相同的代碼爲每個幻燈片ID $（「＃containerdiv DIV大大限制你的js代碼「）。每個（ARR，函數（）{$ （」本「）懸停（函數（）{$ （本）。接下來（」 EM「）停止（真，真）.animate（{不透明度：「秀」，上面：「-60」}，「慢」）;} ，函數（）{$ （本）。接下來（「EM」）動畫（{不透明度：「隱藏」，上面：「 - 70「}，」fast「）; }）; }）; – Dan 2009-11-20 15:52:53

我一直在做這樣的測試。雖然我沒有拿到時間表結構權（可能是因爲我錯過了其中顯示的時間線的背景下，CSS），我得到了彈出窗口顯示添加此CSS聲明：

div {position: relative;}

否則， em的position: absolute聲明將整個頁面（或最靠近的相對定位的元素）作爲參考，從而使彈出窗口離屏（由於-60垂直位置）。

來源

2009-11-20 09:33:01

這有效。非常感謝你。還有一種方法可以將它居中，所以它位於圖像的中心？ – Joshua 2009-11-20 16:11:52

你的意思是，居中彈出？如果是這種情況，可能需要考慮再設置相對於文檔的座標。爲了獲得你需要使用的座標，在div的jQuery包裝器上調用'offset（）'和'left'值，減去彈出圖像寬度的一半，並添加div的一半寬度（你可以調用'width（）'作爲對象的jQuery包裝器，'offset（）'是相對於文檔的左上角計算的 – 2009-11-20 20:08:30

謝謝，還有一件事，我改變了彈出窗口到另一個稍大的圖像，它與時間軸重疊如何解決這個問題，爲什麼這種情況不會發生在其他圖像？ – Joshua 2009-11-21 15:00:53

jQuery Popup/Popout

回答

相關問題