Question

我想制作一个360度3D旋转列表库。我做到了。这是演示：my 3D spinner list jsfiddle（只有按键←＆amp;→适用于jsfiddle）。这是代码（复制整个代码并在浏览器中尝试：）

<html>
<head>
    <style>
        body {
            overflow: hidden;
        }

        ul#spinner { 
            transform-style: preserve-3d; 
            list-style-type: none;
            transform-origin: 50% 50% -500px; 
            transition: 1s;
            clear:both;
        }

        ul#spinner li { 
            width: 50%; 
            max-width: 380px;
            max-height: 380px;
            position: absolute;
            transform-origin: 50% 50% -500px;
            text-align: center;
            font-family: 'Optima', sans-serif;
            outline:1px solid transparent; 
        }

        ul#spinner li:nth-child(1) { transform: rotateY(0deg); }
        ul#spinner li:nth-child(2) { transform: rotateY(-45deg); }
        ul#spinner li:nth-child(3) { transform: rotateY(-90deg); }
        ul#spinner li:nth-child(4) { transform: rotateY(-135deg); }
        ul#spinner li:nth-child(5) { transform: rotateY(-180deg); }
        ul#spinner li:nth-child(6) { transform: rotateY(-225deg); }
        ul#spinner li:nth-child(7) { transform: rotateY(-270deg); }
        ul#spinner li:nth-child(8) { transform: rotateY(-315deg); }

        span:hover { 
            color: #c3c3c3; 
            cursor: pointer; 
            transform: scale(1.5);
            -moz-transform: scale(1.5);
            -webkit-transform: scale(1.5);
        }
   </style>
</head>
<body>
    <div id="lower">
        <ul id="spinner">
            <li id="1" style="background-color:black;color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title1</h3>
                <p>paragraph1</p>
            </li>
            <li id="2" style="background-color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title2</h3>
                <p>paragraph2</p>
            </li>
            <li id="3" style="background-color:black;color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title3</h3>
                <p>paragraph3</p>
            </li>
            <li id="4" style="background-color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title4</h3>
                <p>paragraph4</p>
            </li>
            <li id="5" style="background-color:black;color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title5</h3>
                <p>paragraph5</p>
            </li>
            <li id="6" style="background-color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title6</h3>
                <p>paragraph6</p>
            </li>
            <li id="7" style="background-color:black;color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title7</h3>
                <p>paragraph7</p>
            </li>
            <li id="8" style="background-color:white" onmouseover="MouseOver.scaleup(this)" onmouseout="MouseOver.scaledown(this)">
                <h3>title8</h3>
                <p>paragraph8</p>
            </li>
        </ul>
    </div>
    <span style="float:left;font-size:30pt" class="ss-icon" onclick="galleryspin('-')"><</span>
    <span style="float:right;font-size:30pt" class="ss-icon" onclick="galleryspin('')">></span>
</body>
<script>
    var angle = 0;
    function galleryspin(sign) { 
        var spinner = document.querySelector("#spinner");
        angle += !sign ? 45 : angle - 45; 
        spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
    }

    /* cannot do it on hover in css, so I make it in javascript onmouseover */
    var MouseOver = {
        scaleup: function(source) {
            console.log("mouse in: " + source.id);
        },
        scaledown: function(source) {
            console.log("mouse out: " + source.id);
        }
    }

    document.body.onkeydown = function onKeyDown(event) {
        var PRESSED_KEY = event.keyCode;
        if(PRESSED_KEY == 37)
            galleryspin('-');
        else if(PRESSED_KEY == 39)
            galleryspin('');
    }
</script>

然而，这里有几个我无法解决的问题。

首先：Chrome上的li 3和li 7的onmouseover事件存在问题，它们在事件中效果不佳（仅在第一次鼠标悬停时才有效），但列表完全适用于其他浏览器。任何人都可以帮助我找出导致问题的原因吗？

第二：我应该做些什么来保持旋转器始终在水平方向中心，就像li 3和li 7一样？

真的需要你的帮助，我很感激，也建议我更多地澄清这个问题。

在我的微调器动画中onmouseover上的奇怪的事情

0 个答案: