前台图片样式的相关处理

首先来看一下效果：（当鼠标移动至图片，显示删除图标可以进行删除）

每个图片模板的布局：

<div class="img_notfirst_div templatel div_display" οnmοuseοver="show(this)" οnmοuseοut="hide(this)">
            <img alt="" class="img_pre" src= '' >
            <a class="icon-img-remove" οnclick="return deleteBbsImg(this)" href="javascript:void(0)" title="删除图片">
            <i class="hide_clip">移除</i>
            </a>
</div>

整体布局如下：

<div class="eachitem_input_div">
     <div class="prompt_txt">上传图片：</div>
     <div style="float:left;width:80%;">
	<div class="upload_button_div btnz_green btnz" id="upload_picture">选取图片</div>
	<div class="add_remove_img">
	</div>
     </div>
     <div class="img_notfirst_div templatel div_display" οnmοuseοver="show(this)" οnmοuseοut="hide(this)">
          <img alt="" class="img_pre" src= '' >
          <a class="icon-img-remove" οnclick="return deleteBbsImg(this)" href="javascript:void(0)" title="删除图片">
            <i class="hide_clip">移除</i>
          </a>
     </div>
     <input type="file" id="file_ns" name="upload"
	 οnchange="nsUploadFile(this);" style="display: none;">
</div>

js中动态克隆图片模板，并填充图片：

var $item = $('.img_notfirst_div.templatel').clone();
$('.img_pre',$item).attr('src',homeworkdetail.imageList[i].imageId);
$item.removeClass('templatel').appendTo('.add_remove_img').show();

通过看的到的button的点击事件，触发type为file的隐藏的点击事件：

$('#upload_picture').on('click',function(){
	$('#file_ns').click();
});

在input中有一个onchange事件，当选中图片之后会触发onchange事件：（这个事件是通过内容变化触发的）

function nsUploadFile(obj){

 //此事件中除了上面的克隆填充之外，还有一个上传至服务器，并将服务器地址的图片路径返回的过程。（这样图片将上传至单独的文件服务器，返回的路径将分割之后存至相关的表中。）

}

同时通过onmouseover和onmouseout绑定了鼠标移入移出得事件：

function show(data){
	$(data).find('a').show();
}
function hide(data){
	$(data).find('a').hide();
}

//find方法为找到子标签a（因为删除图标在a上，而鼠标移入移出的动作应该绑定在图片div上）


删除方法：

function deleteBbsImg(data) {
	$(data).parent().remove();
};