Question

我做了一个旋转的3D立方体，我希望它可以通过鼠标滚动进行缩放。我已经添加了鼠标滚动检测听众，但当我尝试增加cube.style.zoom这样的cube.style.zoom + = 0.1时，我会出错。当我提出警报警报（“向下”）;和警报（“向上”）;在我的代码的if（delta＆lt; 0）和else部分中，它在鼠标滚动时发出警告，因此监听器没有问题。代码 - http://pastebin.com/Fxjuguzx

<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% 100px;
}
.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,0.9);
position: absolute;
width: 200px;
height: 200px;
}
.back {
background: rgba(40,40,40,0.8);
transform: translateZ(-100px) rotateY(180deg);
}
.right {
background: rgba(189,25,400,0.3);
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">
function zoomings(){
            var 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) {
        cube.style.zoom=cube.style.zoom-0.1;
        cube.style.moz.zoom=cube.style.moz.zoom-0.1;
    }

    //scrolling up?
    else {
        cube.style.zoom=cube.style.zoom+0.1;
        cube.style.moz.zoom=cube.style.moz.zoom+0.1;
    }
    return false;
    }
}
</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"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</section>
</div>

</body>
</html>

编辑：我知道了。我的代码 - http://pastebin.com/uvXPdS8r

在鼠标滚动上重复放大div元素

0 个答案: