DIV中的image控件，放大，缩小，复原，拖拽

DIV中的image控件，放大，缩小，还原，拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page import="com.fry.ocp.util.RequestUtil" %>
<%@ page import="com.fry.ocp.util.StringUtil" %>
<%@ page import="com.fry.tog.customizationfeed.Surface" %>
<%@ page import="com.fry.tog.util.Personalizer3Manager" %>
<%@ page import="com.fry.tog.util.personalize3.PersonalizeConstants" %>
<%@ page import="com.fry.tog.util.personalize3.ProgressNode" %>
<%@ page import="java.util.Map, java.util.HashMap" %>
<%@ page import="java.util.List"%>
<%@ page import="com.fry.tog.catalog.PersonalizedSurface"%>
<%@ page import="com.fry.ocp.util.ConvertUtil"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="com.fry.tog.util.PreviewManager"%>
<%@ page import="com.fry.ocp.commerce.*"%>
<%@ page import="com.fry.tog.util.SiteUtil" %>
<%@ page import="com.fry.tog.commerce.TOGProductItem" %>
<%@ page import="com.fry.ocp.catalog.*" %>
<%@ page import="com.fry.tog.util.TOGConstants" %>
<%@ page import="java.util.ArrayList, com.fry.tog.util.MultiSiteWebUtil" %>
<%@ page import="com.fry.ocpx.multisite.site.SiteManager" %>

<%
    /*

Copyright (C) 2007 Fry Inc., All Rights Reserved.

Purpose:
This page provides a layout for displaying the Product Personalizer Preview.
*/
%>

<%@ taglib uri='/WEB-INF/ocp-template.tld' prefix='template' %>
<%@ taglib uri="/WEB-INF/ocp-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/ocp-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/ocp-user.tld" prefix="user" %>
<%@ taglib uri="/WEB-INF/ocp-site.tld" prefix="site" %>
<%@ taglib uri="/WEB-INF/ocp-util.tld" prefix="util" %>
<%@ taglib uri="/WEB-INF/tog-personalizer.tld" prefix="personalizer" %>
<%@ taglib uri="/WEB-INF/scene7-image.tld" prefix="scene7" %>
<%@ taglib uri="/WEB-INF/ocp-pipeline.tld" prefix="pipeline" %>
<%@ taglib uri="/WEB-INF/ocp-commerce.tld" prefix="commerce" %>
<%@ taglib uri="/WEB-INF/ocp-i18n.tld" prefix="i18n" %>

<site:site id="currentSite"/>
<i18n:bundle base="com.fry.tog.i18n.TOGResourceBundle" locale='<%=SiteManager.getLocale(currentSite, request)%>' />
<personalizer:pipelineSession id="pipelineSession"/>
<commerce:personalizer3Item id="item" pipelineSession="<%= pipelineSession %>" priceItemId="priceItem" />
<%
    String itemUUID = request.getParameter("subItemUUID");
    if(itemUUID==null || itemUUID=="")
    {
        itemUUID = request.getParameter("itemUUID");
    }
    long productVariantId = item.getLong("ITEM_ID");
    Product product = ProductVariantManager.findProductVariant(productVariantId).getProduct();
    ProgressNode currentWorkingProgressNode = (ProgressNode)request.getAttribute(PersonalizeConstants.REQUEST_KEY_WORKINGNODEINFO);
    int currentSurfaceIndex = currentWorkingProgressNode.getSurfaceIndex();
    //currentSite.getString("PEGASUS_SWF_URL");    http://www.mypegasus.com:81
    String url = currentSite.getString("PEGASUS_SWF_URL")+"/PreviewHandler.ashx";
    url += "?itemuuid="+itemUUID+"&sequence="+currentSurfaceIndex;
    System.out.println(url);
%>
<head>
    <style type="text/css">
        #surface_img
        {
            border:#000000 1px solid;
            cursor:move;
            position:relative;
        }

    </style>
    <script language="JavaScript" type="text/javascript">
    var width = 0;
    var height = 0;
    var zoomR = 1;

    function onloadfun(){
        var oImg = document.getElementById("surface_img");
        width = oImg.width;
        height = oImg.height;
    }

    function ImageChange(args) {
        var oImg = document.getElementById("surface_img");
        if (args) {
            zoomR = zoomR + 0.3;
            if(zoomR > 1.5)
            {
                zoomR = 1.5;
            }
               oImg.width = width * zoomR;
            oImg.height = height * zoomR;
        }
        else {
            zoomR = zoomR - 0.1;
            if(zoomR < 1)
            {
                zoomR = 1;
            }
               oImg.width = width * zoomR;
            oImg.height = height * zoomR;
        }
    }

    function ImageFixChange(){
        var oImg = document.getElementById("surface_img");
        oImg.width = width;
        oImg.height = height;
        zoomR = 1;
    }

    var oBoolean = false, oLeftSpace = 0, oTopSpace = 0;
    function mStart() {
       oBoolean = true;
       if (oBoolean) {
          var oImg = document.all('surface_img');
          oLeftSpace = window.event.clientX - oImg.style.pixelLeft;
          oTopSpace = window.event.clientY - oImg.style.pixelTop;
       }
    }

    function mEnd() {
       oBoolean = false;
    }

    document.onmousemove = function(event) {
       if (window.event.button==1 && oBoolean) {
          var oImg = document.all('surface_img');
          oImg.style.pixelLeft = window.event.clientX - oLeftSpace;
          oImg.style.pixelTop = window.event.clientY - oTopSpace;
          return false;
       }
    }
    </script>
</head>
<body>

    <div class="photo_approve" id="photo_approve">
    <div id="views" class="photo_approveText">
        Final Preview: Please review your personalization to verify everything is correct. Your product will print exactly as shown below.
        <div class="clear"></div>
        <p class="review_personalization"></p>
    </div>

    <div id="previewStage" class="previewStage">
        <div id="previewPanel" style= "overflow:auto;width:100%;height:100%">
        <center>
            <img src="<%=url %>" id="surface_img" onload="onloadfun()" onMouseDown="mStart();" onMouseUp="mEnd();"/>
        </center>




        </div>
    </div>
    <div id="prevControls" class="photo_approveBtn">
        <html:img env="images" src="personalizer3/b_zoomin.gif" width="98" height="23" alt="Zoom In" border="0" styleClass="zoomBtn" onClick="ImageChange(true)"/>
        <html:img env="images" src="personalizer3/b_zoomout.gif" width="98" height="23" alt="Zoom Out" border="0" styleClass="zoomBtn" onClick="ImageChange(false)"/>
        <html:img env="images" src="personalizer3/b_fit.gif" width="98" height="23" alt="Fit to Window" border="0" styleClass="zoomBtn" onClick="ImageFixChange()"/>
    </div>
        <div class="photo_approveRightBtn" id="buttons">
            <html:a href="javascript:submitFlow('previous');"><%/* bak href='< %="/personalize3/checkout/move_item_to_personalizer.cmd?itemUUID="+itemUUID+"&subItemUUID="+subItemUUID% >' */%>
                <html:img env="images" src="personalizer3/b_returntopersonalizer_blue.gif" styleClass="returnBtn" width="169" height="27" alt="Return To Personalizer" border="0"/>
            </html:a>
            <html:a styleId="finish_link" href="javascript:submitFlow('next');">
                <html:img env="images" src="personalizer3/b_i_approve.gif" styleClass="finishBtn" width="96" height="27" alt="Finish" border="0"/>
            </html:a>
        </div>
    <div class="clear"></div>
    </div>

</body>
</html>

DIV中的image控件，放大，缩小，复原，拖拽

相关推荐