圖片在瀏覽器中底部對齊 解決方法之一
更新時間：2011年11月30日 23:43:08 作者：
需要在列表中顯示很多圖片，圖片高低不同，寬度都設(shè)置一樣了，要底部對齊
style="vertical-align:bottom;"不管用，上網(wǎng)搜索說要用js實現(xiàn)，找了個代碼，測試不成功，主要是代碼太多太亂沒法心情測試了。
于是就自己寫吧。
$(function () {
if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之類瀏覽器
$(".productli img").each(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
if ($.browser.safari) {//如果是蘋果或chrome瀏覽器
$(".productli img").load(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
})
經(jīng)測試以下瀏覽器通過
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋果
百度之類IE內(nèi)核的就沒測了肯定能用。
期待更精簡代碼出現(xiàn)。
于是就自己寫吧。
復(fù)制代碼 代碼如下:
$(function () {
if ($.browser.msie || $.browser.mozilla || $.browser.opera) {//IE 火狐 Opera之類瀏覽器
$(".productli img").each(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
if ($.browser.safari) {//如果是蘋果或chrome瀏覽器
$(".productli img").load(function () {
var margin = 120 - $(this).height();
$(this).css("margin-top", margin + "px");
});
}
})
經(jīng)測試以下瀏覽器通過
IE6、 IE8、Chrome、 Opear、 FireFox、 QQ瀏覽器、 360、 傲游、 蘋果
百度之類IE內(nèi)核的就沒測了肯定能用。
期待更精簡代碼出現(xiàn)。
相關(guān)文章
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計者更好地駕御 HTML 表格，你可以對表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對表格進(jìn)行搜索，對大表格進(jìn)行分頁，對表格進(jìn)行滾動，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
這篇文章介紹了JQ獲取動態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下2013-11-11
360全景就是視角超過人的正常視角的圖像，而我們這里說的全景特指水平視角360度，垂直視角180度的圖像?？梢匀翱臻g里進(jìn)行切換，達(dá)到瀏覽各個不同場景360全景展示的目的。2015-03-03
jquery實現(xiàn)的超出屏幕時把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過taobao吧，在taobao的產(chǎn)品列表頁有一個浮動的用來排序的浮動層，當(dāng)你拖動滾動條而導(dǎo)致那個排序欄看不到的時候它會自動變?yōu)楦訉?，一直固定在那里?/div> 2010-02-02
jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實現(xiàn)滑屏大圖定時收縮為小banner圖片的廣告代碼,可實現(xiàn)大幅廣告圖的漸顯效果及定時收縮功能,點擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實用價值,需要的朋友可以參考下2015-09-09
本文給大家分享基于jquery步驟進(jìn)度條源碼分享，實現(xiàn)功能是這樣的，在輸入框中輸入第3步，點擊重新生成按鈕，相應(yīng)的步驟顏色就會加深，對jquery步驟進(jìn)度條感興趣的朋友一起看看吧2015-11-11
jquery 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨query 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
本文主要對jQuery選擇器進(jìn)行一一舉例介紹，有助于學(xué)習(xí)、理解和記憶。具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12
jquery 查找iframe父級頁面元素的實現(xiàn)代碼
jquery 查找iframe父級頁面元素的實現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08
這個腳本是網(wǎng)上的代碼修改的，兼容各主流瀏覽器，優(yōu)化頁面異步加載的文字的檢索提示框定位，根據(jù)選擇文字位置與屏幕尺寸計算檢索提示框定位。2010-09-09最新評論