Project_PlatForm/000_通用版本/020_合作商户管理-高速驿网/Coop.Merchant.WebSite/CommonPage/IMAGE.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="IMAGE.ascx.cs" Inherits="Coop.Merchant.CommonPage.IMAGE" %>
<%@ Register Assembly="RealEstate.Web" Namespace="SuperMap.RealEstate.Web.UI.WebControls" TagPrefix="smwc" %>

<script src="/Finance/Resources/v1_0/js/jquery-1.10.2.js"></script>
<script src="/Finance/Resources/v1_0/js/jquery-browser.js"></script>
<script src="/Finance/Resources/v1_0/js/jquery.imageView.js"></script>
<style type="text/css">
    .rot1 {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

    .rot2 {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
        -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    }

    .rot3 {
        -moz-transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    #imageView_container {
        border: 2px solid #000000;
    }
      .A_Css {
        padding: 4px 15px 7px;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
        border-radius: 5px;
        background-color: #f1f1f1;
        border: 1px solid #bfbfbf;
        color: #000;
    }
</style>
<ul style="height: 100%;">
    <li class="Col1" style="height: 100%;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-layout: fixed; height: 100%;">
            <tr>
                <td valign="top" style="width: 200px;">
                    <fieldset class="cssGroupBar">
                        <legend><b>图片信息</b></legend>
                        <asp:TreeView ID="MyTreeView" runat="server" SkipLinkText="" CollapseImageToolTip="" ExpandImageToolTip=""
                            Target="SellObjectDetail" NodeIndent="10" ShowLines="True" SelectedNodeStyle-Font-Bold="true"
                            OnSelectedNodeChanged="MyTreeView_SelectedNodeChanged" Font-Size="Large" />
                    </fieldset>
                </td>
                <td style="width: 5px; height: 100%;"></td>
                <td valign="middle">
                    <div id="imageView_container" style="overflow: hidden; position: relative; width: 610px; height: 448px;">
                        <img src="" id="rotImg"
                            style="cursor: move; visibility: visible; position: absolute;" width="610" height= "448" runat="server" />
                    </div>
                    <div style="padding-top: 5px;">
                        <input type="button" value="放大" onclick="imgToSize(100)">
                        <input type="button" value="缩小" onclick="imgToSize(-100);">
                        <input type="button" value="向右旋转" id="rotRight">
                        <input type="button" value="向左旋转" id="rotLeft">
                        <a href="#" id="New_URL" target="_blank" runat="server" style="display:none" class="A_Css">查看原图片</a>
                    </div>
                </td>
            </tr>
        </table>
    </li>
</ul>

<ul style="display: none;">
    <li>
        <smwc:TextBoxEx ID="IMAGE_ID" Width="100%" runat="server" CaptionText="图片内码:" ValidType="Integer" ReadOnly="True"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:DropDownListEx ID="ISVALID" Width="100%" runat="server" CaptionText="是否有效:" ValidType="Integer" DisableSearch="true"></smwc:DropDownListEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="IMAGE_DATE" Width="100%" runat="server" CaptionText="图片日期:" ValidType="DateTime"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="TABLE_ID" Width="100%" runat="server" CaptionText="表内码:" ValidType="Integer"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="TABLE_NAME" Width="100%" runat="server" CaptionText="表名:"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="IMAGE_TYPE" Width="100%" runat="server" CaptionText="图片类型:" ValidType="Integer"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="IMAGE_CONTENT" Width="100%" runat="server" CaptionText="图片内容:"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="IMAGE_URL" Width="100%" runat="server" CaptionText="图片地址:"></smwc:TextBoxEx>
    </li>
    <li>
        <smwc:TextBoxEx ID="IMAGE_PATH" Width="100%" runat="server" CaptionText="图片路径:"></smwc:TextBoxEx>
    </li>
</ul>

<script type="text/javascript">
    $(function () {
        var param = {
            right: document.getElementById("rotRight"),
            left: document.getElementById("rotLeft"),
            img: document.getElementById('<%=rotImg.ClientID %>'),
            rot: 0
        };
        var fun = {
            right: function () {
                param.rot += 1;
                param.img.className = "rot" + param.rot;
                if (param.rot === 3) {
                    param.rot = -1;
                }
            },
            left: function () {
                param.rot -= 1;
                if (param.rot === -1) {
                    param.rot = 3;
                }
                param.img.className = "rot" + param.rot;
            }
        };
        param.right.onclick = function () {
            fun.right();
            return false;
        };
        param.left.onclick = function () {
            fun.left();
            return false;
        };
        $('#imageView_container').imageView({ width: 610, height: 448 });
    });

    var size = 0;
    //放大缩小图片
    function imgToSize(size) {
        var img = $("#<%=rotImg.ClientID %>");
        var oWidth = img.width(); //取得图片的实际宽度
        var oHeight = img.height(); //取得图片的实际高度
        img.width(oWidth + size);
        img.height(oHeight + size / oWidth * oHeight);
    }
</script>