因为专注,所以专业
2005 - 2019

iwebshop fileUpload AJAX上传缩略图美化

时间:2019-01-01 14:51:32    作者:八叔模板堂

修改 picTemplate js 模板,将模板改成如下:

<script type='text/html' id='picTemplate'>
<div class="pic">
	<img class="img-thumbnail" src="<%=webroot(picRoot)%>" alt="<%=picRoot%>"/>
	<a href='javascript:;' onclick="$(this).parents('.pic').remove();">&nbsp;</a>
</div>
</script>

给ID thumbnails 的div 加一个 class thumbnails_box

在样式中加入以下样式:

.thumbnails_box { width:100%; height:auto; display:table; clear:both; }
.thumbnails_box .fileUpload_box { width:50px; height:50px; border:1px solid #dedede; margin-top:6px; position:relative; overflow:hidden; }
.thumbnails_box .fileUpload_box i { width:50px; height:50px; line-height:50px; color:#999; text-align:center; display:block; }
.thumbnails_box .fileUpload_box input { width:50px; height:50px; display:block; position:absolute; top:0px; left:0px; opacity:0; }
.thumbnails_box .pic { width:50px; height:50px; border:1px solid #f0f0f0; float:left; margin:6px 10px 0 0; position:relative; }
.thumbnails_box .pic img { width:50px; height:50px; border:0px; }
.thumbnails_box .pic a { width:50px; height:50px; position:absolute; top:0px; left:0px; }
.thumbnails_box .pic a::before { width:16px; height:16px; line-height:14px; text-align:center; font-size:12px; color:#fff; content:'×'; display:block; position:absolute; right:-8px; top:-8px; background:#f00; border-radius:16px; }

美化后的效果如下:

赞(3
免费拨打  180-0797-1768
免费拨打  180-0797-1768免费拨打 180-0797-1768
微信二维码
手机二维码
返回顶部
返回顶部返回顶部