Question

当我从第一个选择文件中选择图像后按下提交按钮时，没有任何反应，并且没有图像添加到多维数据集的右侧面。在功能addphotos（）下，当我写了right.style.zoom = 2时，它也无法正常工作。所以我觉得函数调用有问题。代码 - http://pastebin.com/QCHSH2iy

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var yAngle = 0;
var xAngle = 0;
document.onkeydown = checkKey;
function checkKey(e) {

e = e || window.event;

if (e.keyCode == '39') {
    yAngle = yAngle+5;
    $("section").css("transform",'rotateY('+yAngle+'deg)');
}
if (e.keyCode == '37'){
    yAngle = yAngle-5;
    $("section").css("transform",'rotateY('+yAngle+'deg)');
}
if (e.keyCode == '38'){
    xAngle = xAngle+5;
    $("section").css("transform","rotateX("+xAngle+"deg)");
}
if (e.keyCode == '40'){
    xAngle = xAngle-5;
    $("section").css("transform",'rotateX('+xAngle+'deg)');
}
}
$("#button_left").click(function(){
    yAngle = yAngle-5;
    $("section").css("transform",'rotateY('+yAngle+'deg)');
});

$("#button_right").click(function(){
    yAngle = yAngle+5;
    $("section").css("transform","rotateY("+yAngle+"deg)");
});
$("#button_down").click(function(){
    xAngle = xAngle-5;
    $("section").css("transform",'rotateX('+xAngle+'deg)');
});

$("#button_up").click(function(){
    xAngle = xAngle+5;
    $("section").css("transform","rotateX("+xAngle+"deg)");
});
});
</script>

<style>

.buttons {
align: center;
}
.wrap {
perspective: 800px;
perspective-origin: 50% 50%;
}
.cube {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube div {
box-shadow: inset 0 0 20px rgba(125,125,125,1);
position: absolute;
width: 200px;
height: 200px;
}
.back {
background: rgba(189,25,400,0.3);
transform: translateZ(-100px) rotateY(180deg);
}  
.right {
background: rgba(189,25,400,0.3);
background-repeat: no-repeat;
background-position: center center;
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
background: rgba(189,25,400,0.3);
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
background: rgba(189,25,400,0.3);
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
} 
.bottom {
background: rgba(189,25,400,0.3);
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front { 
background: rgba(189,25,400,0.3);
transform: translateZ(100px);
}

</style>

<script type="text/javascript">
var zoom=1;
var val;
function zoomings(){
            val=document.getElementById("zooming").value;
            cube.style.zoom=val;
            cube.style.moz.zoom=val;
        }

if (document.addEventListener) {
document.addEventListener("mousewheel", MouseWheelHandler(), false);
document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
return function (e) {
    // cross-browser wheel delta
    var e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    //scrolling down?
    if (delta < 0) {
        if (zoom > 0.3)
        {zoom=zoom-0.05;}
        cube.style.zoom=zoom;
        cube.style.moz.zoom=zoom;           
    }

    //scrolling up?
    if (delta > 0) {
        if (zoom<1.8)
        {zoom=zoom+0.05;}
        cube.style.zoom=zoom;
        cube.style.moz.zoom=zoom;
    }
    return false;
}
}
</script>
<script>
function addphotos() {
right.style.background-image=document.getElementById("image1");
}

</script>
</head>

<body><br>
<div align="center" class="buttons">
<input type="button" value="<--" id="button_left">
<input type="button" value="-->" id="button_right">
<input type="button" value="down" id="button_down">
<input type="button" value="up" id="button_up">

<span>Zoom: </span><select id='zooming' onchange="zoomings()">
    <option value="0.25">25%</option>
    <option value="0.5">50%</option>
    <option value="0.75">75%</option>
    <option value="1" selected="selected">100%</option>
    <option value="1.5">150%</option>
    <option value="1.75">175%</option>
</select></div>

<br><br><br><br><br><br><br>
<div class="wrap">
<section class="cube" id="cube">
    <div class="front" id="front"></div>
    <div class="back" id="back"></div>
    <div class="top" id="top"></div>
    <div class="bottom" id="bottom"></div>
    <div class="left" id="left"></div>
    <div class="right" id="right"></div>
</section>
</div>
<div align="left">
<form>
<input type="file" name='image1' id='image1'><br>
<input type="file" name='image2' id='image2'><br>    
<input type="file" name='image3' id='image3'><br>
<input type="file" name='image4' id='image4'><br>
<input type="submit" name="Submit" onclick="addphotos()" value="Submit">           </input>
</form>
</div>

</body>
</html>

Answer 1

当您按下提交按钮时，它会执行以下操作：提交表单。要阻止它，请将return false;添加到addphotos()。

这是一个非常好用于缩放图像的插件：https://github.com/timmywil/jquery.panzoom看看它！

此外：

对不起，我的不好。但您需要通过FileReader API读取文件的上下文，或上传所选文件。您不能只将背景设置为输入值。
没有el.style.moz.xxx。请参阅How to set -moz-transition property from within JavaScript?
没有el.style.background-image。你在这里做什么：字符串减去未定义的变量。请参阅http://www.w3schools.com/cssref/pr_background-image.asp
请勿使用onclick属性。从JS代码中添加一个事件监听器。
你应该使用:( weel代码块不想工作）document.addEventListener("mousewheel", MouseWheelHandler, false); function MouseWheelHandler() { //...your code }。调用只返回一个函数的函数是没用的。

通过js从图片添加图像

1 个答案: