国产亚洲精品自拍,亚洲va在线va天堂va不卡下载,亚洲av中文无码字幕色本,国产精品久久国产精品},韩国激情一区二区无码在线},亚洲人成网站www

信息動態(tài)

網(wǎng)站設(shè)計是技術(shù)與創(chuàng)意的完美融合!

技術(shù)資訊

統(tǒng)一寬高的列表圖片JS判斷寬高自動截取中間最佳部分

2016-08-19 10:41:00

最近在研究QQ空間中圖片列表中的圖片JS自動判斷寬高并截取中間最佳部分的代碼應(yīng)用于青島網(wǎng)站建設(shè)，這個效果用語言不太好表達，具體來說，就是在一個圖片列表中，每個圖片的寬高都是統(tǒng)一的，但是因為圖片本身會有的高，有的寬，這就需要根據(jù)圖片寬高屬性，如果是高的圖，就JS判斷后寬度顯示100%，高度截取中間部分，如果是寬圖，則JS判斷后高度顯示100%，寬度截取中間部分。

如下圖：起重機的那張寬型圖，雖然圖片高度像素比列表區(qū)域小，但是也會自動顯示100%高度，同時截取圖片寬度的中間部分。而第二張圖片恰恰相反，因為是高型圖片，所以寬度100%，高度自動截取中間部分。

JS判斷的語句如下：
<script type="text/javascript">
$(window).load(function() {
    $("#newscontent2 .img img").each(function() {
        var maxwidth = 224;
        var maxheight = 137;
        var thisHeight = $(this).height();
        var thisWidth = $(this).width();
        //如果寬為224
        var w224Height = thisHeight / (thisWidth / 224);
        //如果高為137
        var h137Width = thisWidth / (thisHeight / 137);
 
        if (w224Height > maxheight) {
            $(this).width(maxwidth);
            $(this).height(w224Height);
            $(this).css('left', '0');
            $(this).css('top', '50%');
            $(this).css('margin-top', -w224Height / 2);
 
        } else {
            $(this).height(maxheight);
            $(this).width(h137Width);
            $(this).css('top', '0');
            $(this).css('left', '50%');
            $(this).css('margin-left', -h137Width / 2);
        }
    });
});
</script>
 
CSS代碼如下：
#newscontent2 li .img{ float:left; width:224px; height:137px;position:relative;overflow:hidden;}
#newscontent2 .img img{position: absolute; left: 50%; top: 50%; z-index: 999;}
 
這種效果，最大的好處就是無須手動ps圖片寬高，就可以通過網(wǎng)站后臺上傳到圖片列表，并且讓圖片不變形，顯示圖片最佳位置，增強用戶體驗。
 
0532-85810878 473587358 掃碼添加微信

掃碼添加微信

 掃碼關(guān)注公眾號

官方公眾號

 2054585360
芒康县| 资源县| 海林市| 五华县| 介休市| 涡阳县| 泽普县| 邵东县| 北票市| 淮阳县| 夏河县| 邵阳市| 娄烦县| 婺源县| 长沙市| 石家庄市| 民权县| 确山县| 和硕县| 仙游县| 昌都县| 庆元县| 北宁市| 洛隆县| 阿瓦提县| 班玛县| 尼玛县| 鞍山市| 新乡市| 益阳市| 郎溪县| 乌拉特后旗| 金山区| 民勤县| 莱阳市| 姜堰市| 无锡市| 虞城县| 井陉县| 金阳县| 民勤县|