列表和添加编辑中的图片浮层放大

一》列表页

<table class="m-table f-cb mart20" border="0">

<tr>

<th class="f-width80">

封面

</th>

</tr>

<tr class="tablebg">

<td>

<img id="imgsmall" src="http://192.168.0.238:84/home/img?id=@template.nImgUrl&width=30&height=40" name="imgsmall"/>//MVC中用的

</td>

</table>

<div id="big" style="z-index: 10000;" name="big">//放大浮层

</div>

JS

@*图片放大相关*@

<script type="text/javascript">

var oBig = document.getElementById("big");

$(function () {

$("img[name='imgsmall']").mouseover(function () {

//

var oImg = document.createElement("img");

//图片预加载

var img = new Image();

img.src = oImg.src = this.src.replace("&width=30&height=40", "&width=150&height=200"); //修改图片大小。

//alert(oImg.src);

//插入大图片

oBig.appendChild(oImg);

//鼠标移过样式

this.className = "active";

//显示big

oBig.style.display = "block";

});

//鼠标移动, 大图容器跟随鼠标移动

$("img[name='imgsmall']").mousemove(function (event) {

var event = event || window.event;

var iWidth = document.documentElement.offsetWidth - event.clientX;

//设置big的top值

oBig.style.top = event.clientY + 20 + "px";

//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.

oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

});

//鼠标离开, 删除大图并隐藏大图容器

$("img[name='imgsmall']").mouseout(function () {

this.className = "";

oBig.style.display = "none";

oBig.removeChild(oBig.lastChild)

});

});

</script>

<style type="text/css">

#big

{

border-bottom: #ddd 2px solid;

position: absolute;

border-left: #ddd 2px solid;

width: 60px;

display: none;

height: 80px;

border-top: #ddd 2px solid;

border-right: #ddd 2px solid;

}

#big DIV

{

position: absolute;

filter: alpha(opacity=50);

width: 60px;

background: url(img/loading.gif) #fff no-repeat 50% 50%;

height: 80px;

top: 0px;

left: 0px;

opacity: 0.5;

}

</style>

二：添加编辑

<dd>

<input type="file" id="FileUpload" name="FileUpload" />

<input type="button" class="u-btnblue" value="上传" id="liulan" />

<img id="imgsmall" src="http://192.168.0.238:84/home/img?id=@Model.nImgUrl&width=30&height=40"/>

<div id="big" style="z-index: 10000;">

<img id="imgBIG" src="http://192.168.0.238:84/home/img?id=@Model.nImgUrl&width=300&height=400"/>

</div>

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for=""><span

class="" generated="true" id="testliulan"></span></span>

</dd>

@*图片放大相关*@

<script type="text/javascript">

function showIMG() {

var img1 = document.getElementById("imgsmall");

var oBig = document.getElementById("big");

var oLoading = oBig.getElementsByTagName("div")[0];

//鼠标划过, 预加载图片插入容器并显示

img1.onmouseover = function () {

var oImg = document.createElement("imgsmall");

//鼠标移过样式

this.className = "active";

//显示big

oBig.style.display = "block";

};

//鼠标移动, 大图容器跟随鼠标移动

img1.onmousemove = function (event) {

var event = event || window.event;

var iWidth = document.documentElement.offsetWidth - event.clientX;

//设置big的top值

oBig.style.top = event.clientY + 20 + "px";

//设置big的left值, 如果右侧显示区域不够, 大图将在鼠标左侧显示.

oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px";

};

//鼠标离开, 删除大图并隐藏大图容器

img1.onmouseout = function () {

this.className = "";

oBig.style.display = "none";

}

};

</script>

<style type="text/css">

#big

{

border-bottom: #ddd 2px solid;

position: absolute;

border-left: #ddd 2px solid;

width: 300px;

display: none;

height: 400px;

border-top: #ddd 2px solid;

border-right: #ddd 2px solid;

}

#big DIV

{

position: absolute;

filter: alpha(opacity=50);

width: 300px;

background: url(img/loading.gif) #fff no-repeat 50% 50%;

height: 400px;

top: 0px;

left: 0px;

opacity: 0.5;

}

</style>

有待改善，自己留存