Question

我发现Image Power Zoomer v1.1对我的项目有用并下载了它。这与代码

一起工作正常

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('#myimage').addpowerzoom({
 defaultpower: 2,
 powerrange: [2,5],
 largeimage: null,
 magnifiersize: [100,100] //<--no comma following last option!
});
});
</script>

<body>
    <img id="myimage" src="ocan.png" style="width:600px; height:600px" />
</body>

但是当我在下一页中使用这个缩放器时，我需要在我的项目中进行集成，它不起作用。代码如下（代码更多用于画布中的注释。但很容易理解。图像不需要加载它的工作）。我在我的项目中使用struts2和tile（我添加这个想法，这可能有一些影响）

<%@ taglib uri="/struts-tags" prefix="s" %>

<head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){ 
     $('#original').addpowerzoom({
     defaultpower: 2,
     powerrange: [2,5],
     largeimage: null,
     magnifiersize: [100,100] /* <--no comma following last option! */
    });
    });
</script>

<style>
    #myCanvas { 
        background:url("<s:property value='resultFileName'/>") ;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #myCanvas,#tempcanvas{ 
        cursor: pointer;
        border:1px solid black; 
        position:absolute;
        margin-left: 0px;   
        margin-bottom: 20px;                
    }

    #myCanvas:active, #tempcanvas:active { 
        cursor: crosshair;
    }       

    input[type = button],input[type = submit], select{
        width:100px;
        margin:10px 0 10px 0;
        border-radius:5px;
        font-family: Cursive;
        padding: 5px;
     }

     form, input[type = button], input[type = submit]{
        position:relative;              
     }

     input[type = image]{
        border:none;
        width: auto;
        height: auto;
        padding: 0;
        margin-top: 50;
        border-radius:0;
     }

</style>        
</head>     

<body style="margin-left: 200px">

<div class="form_content">

    <!-- ___________________________________Original image_______________________________ -->

    <div class="just_heading">Original Image</div>
    <img id="original" alt="Error loading the image" src="<s:property value='originalFileName'/>" width="664" height="585"/> <br><br>


    <!-- ___________________________________Result image_______________________________ -->

    <div class="just_heading">Result Image</div>
    <img id="result" src="<s:property value='resultFileName'/>" hidden="true" alt="result image" width="565" height="584"/>
    <canvas id="myCanvas" width="664" height="585" style="border:1px solid #d3d3d3;">
        Please use a modern browser like Firefox, Chrome, Safari
    </canvas>
    <canvas id="tempcanvas" width="664" height="585" style="border:1px solid #d3d3d3;"></canvas>

    <div>
        <canvas id="canvas2" width="664" height="585" hidden="true" style="left:600; top:10; position:obsolute;"></canvas>
        <input type="image" id="canvasImg" name="canvasImg" hidden="true"> 
        <img alt="Error loading the result" src="<s:property value='resultFileName'/>" width="664" height="585"/>
    </div>

    <!-- _______________________________Previous annotated image______________________________ -->

    <div class="just_heading">Annotated Images</div>
    <s:iterator value="annotatedImageDetails">
    <tr>
        <td><span class="just_message">Annotated by <s:property value="AnnotatedBy"/><br></span></td>
        <td><img alt="No annotated Image found" src="<s:property value="AnnotatedImageName"/>" width="664" height="585"/></td>
    </tr>
    <br><br>
    </s:iterator>
    <!--  ______________________________Script Starts here____________________________________  --> 

</div>

</body>

Answer 1

我注意到你在第二个例子中更改了脚本声明。

我已经检查过，似乎ddpowerzoomer.js正在使用jQuery。实际上，它正在为您创建一个jQuery函数。你必须在执行ddpowerzoomer.js之前实例化jQuery，否则它将无法工作。

<head>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/ddpowerzoomer.js"></script>

<script type="text/javascript">
...

JQuery（document）.ready没有加载

1 个答案: