-1
Когда я нажимаю кнопку отправки после выбора изображения из первого файла выбора, ничего не происходит, и изображение не добавляется к правой стороне куба. Под fuction addphotos(), когда я написал right.style.zoom = 2, также он не работал. Поэтому я думаю, что есть проблема с вызовом функции или чем-то еще. код - http://pastebin.com/QCHSH2iyДобавление изображения из изображений через js
<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>
Шансы получить ответ значительно выше, если вы разместите здесь код с комментариями, а затем связали где-нибудь –
Axel Amthor, сделано! Вы знаете, как решить мою проблему? – RaviTej310
Ваши шансы получить ответ также будут значительно улучшены, если вы усовершенствуете свой код до [минимального примера] (http://stackoverflow.com/help/mcve), необходимого для демонстрации проблемы. Ваш текущий код содержит много избыточного крутизны, которые, я уверен, не имеют никакого отношения к проблеме вообще. –