你的位置:首页 > Java教程

[Java教程]图片裁减列表显示


.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