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

  一》列表页

    <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>

有待改善，自己留存