js 图片放大效果，备以后用。

看了论坛内的 js图片放大的效果的几个帖子，这里就不引用了，自己搜索。简单的美化了一下图片显示效果。

（使用了附件上传插件）

1、放图片的表格拖入图片的名称或地址信息，编辑字段内容，设置用HTML显示内容。

IF(LEN($$$)>0,'<img class="littleimg" width="auto" height="80px" alt="'+ $ProductName +'" src="' + serverURL + contextPath  + "/FineFile/Stock/" + $$$ + '">','')

在模板WEB属性增加加载结束事件，写入JS内容。

js如下：

   //获取单元格内的IMG类littleimg，绑定事件

   $(".littleimg").mouseover(function(e) {

//显示图片弹窗的样式

var html = '<div id="preview" style="display:none; opacity: 1; left: 50%; top:20%;background: #fff; border-radius: 3px; box-shadow: 0 0 25px #000; padding: 10px; position: absolute; z-index: 105;">'

+ '<div class="boxer-container" style="height: 420px; width: 600px;">'

+ '<div class="boxer-content" style="opacity: 1; height: auto; width: 600px;">'

+ '<img class="bigimg"  src="img/1b.jpg" style="height: 375px; width: 600px; margin-top: 0px; margin-left: 0px;">'

+ '<div class="boxer-meta" style="width: 600px;">'

+ '<div class="boxer-caption gallery">'

+ '<p class="caption" style= "margin: 0; padding: 0px 10px 10px 10px;">标题</p>'

+ '</div></div></div></div></div>'

//给图片单元格加上手势指针

$(".littleimg").parent("td").css("cursor", "pointer");

//在body 结尾插入HTML

$("body").append(html);

//littleimg 的url 与alt 内容

var imgsrc = $(this).attr("src"); 

var imgalt = $(this).attr("alt");

//设置HTML中的图片src 与 标题内容

$(".bigimg").attr("src",imgsrc);

$(".caption").text(imgalt);

//显示这个样式

$("#preview").show();

});

//鼠标离开这个div移除

$(".littleimg").mouseout(function(e){

               $("#preview").remove();

   });