码迷,mamicode.com
首页 > 其他好文 > 详细

图片裁减列表显示

时间:2015-12-19 11:10:11      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
.jupload1-list { overflow: hidden; width: 100%; }
.jupload1-list div { overflow:hidden;float: left; width: 20%; margin: 2.5% 0 0 4%; border: transparent 2px solid; border-top-width: 8px; cursor:pointer; }
.jupload1-list img { width: 100%; }
.jupload1-list div.cur { border-color: #d0f500; }
.jupload1-list input { border: #ccc .1rem solid;}
Css
技术分享
<div class="jupload1-list"></div>
Html
技术分享
var size = $(document).width() * 0.2;
$.each("/Image/BigImage/backGround.png,/Image/BigImage/test.jpg".split(‘,‘), function (i, src) {
var img = new Image();
img.src = src;
img.onload = function () {
    var rate = img.width / img.height;
    var $div = $(‘<div></div>‘).height(size).append($(img).css(rate > 1 ?
    { ‘height‘: size, ‘width‘: rate * size, ‘margin-top‘: -5, ‘margin-left‘: (1 - rate) * size / 2 } :
    { ‘height‘: size / rate, ‘width‘: size, ‘margin-top‘: (1 - 1 / rate) * size / 2 - 8, ‘margin-left‘: -2 }
    ));
    $(‘.jupload1-list‘).append($div);
}
})
jQuery

技术分享

图片裁减列表显示

标签:

原文地址:http://www.cnblogs.com/jamkier/p/5058699.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!