前台图片样式的相关处理

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

每个图片模板的布局：

<div class="img_notfirst_div templatel div_display" onmouseover="show(this)" onmouseout="hide(this)">            <img alt="" class="img_pre" src= '' >            <a class="icon-img-remove" onclick="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" onmouseover="show(this)" onmouseout="hide(this)">          <img alt="" class="img_pre" src= '' >          <a class="icon-img-remove" onclick="return deleteBbsImg(this)" href="javascript:void(0)" title="删除图片">            <i class="hide_clip">移除</i>          </a>     </div>     <input type="file" id="file_ns" name="upload" onchange="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();};