javascript - 浏览推文(框)+三个js

Question

这是我的情况:

我想像这样显示 Twitter 推文:http://threejs.org/examples/css3d_periodictable.html

这是我现在拥有的:http://nielsvroman.be/twitter/root/index.php
方框是来自用户的推文:@BachelorGDM。

我现在想要的是总有一个被选中并且您可以使用键盘上的箭头键在它们之间导航。

这是我的 javascript 代码:

// THE TWEETS 
var data = loadTweets()

// FUNCTION SHOW THE TWEETS
function ShowTweets(){

// VARS TABLE WITH TWEETS / PLACE IN COLUMN / PLACE IN ROW
var table = [];
var column = 1;
var row = 1;

// LOOP THROUGH DATA AND CREATE TABLE WITH TWEET DETAILS + PLACE 
$.each(data, function(i) {

    // DETAILS TWEET
    var idstring = data[i].id_str;
    var screenname = data[i].user.screen_name;
    var imageurl =  data[i].user.profile_image_url;

    // 9 TWEETS NEXT TO EACH OTHER
    if(column % 9 == 0)
    {
        row++
        column = 1;
    }

    var array = [imageurl, idstring, screenname, column, row ]

    column++;

    table.push(array);
});

// VARIABLES THREE JS
var camera, scene, renderer;
var controls;

var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };

init(); // CALL INIT FUNCTION
animate(); // CALL ANIMATE FUNCTION

function init() {

    // INITIALIZE CAMERA
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
    camera.position.z = 1800;

    // INITIALIZE SCENE
    scene = new THREE.Scene();

    // LOOP THROUGH TABLE ARRAY (ARRAY WITH ARRAYS IN IT)
    for ( var i = 0; i < table.length; i ++ ) {

        var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row]
        var element = document.createElement( 'div' );
        element.className = 'element';
        element.id = item[1]; // ITEM IDSTRING
        element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')'; // BG COLOR + OPACITY FROM FRAME

        var number = document.createElement( 'div' );
        number.className = 'number';
        number.textContent = i + 1; // NUMBER IN THE RIGHT TOP
        element.appendChild( number );

        var symbol = document.createElement( 'div' );
        symbol.className = 'symbol';
        var img = document.createElement('img');
        img.src = item[0]; // IMAGE SOURCE IS LINK TO IMAGE
        symbol.appendChild(img);
        element.appendChild( symbol );

        var details = document.createElement( 'div' );
        details.className = 'details';
        details.innerHTML = "" + '<br>' + item[2]; // SCREENNAME
        element.appendChild( details );

        var object = new THREE.CSS3DObject( element );
        // POSITION OBJECTS AGAINST EACH OTHER
        object.position.x = Math.random() * 4000 - 2000;
        object.position.y = Math.random() * 4000 - 2000;
        object.position.z = Math.random() * 4000 - 2000;

        // ADD OBJECTS TO SCENE
        scene.add(object);

        // ADD OBJECT TO OBJECTS ARRAY
        objects.push(object);
    }

    // TABLE VIEW

    for ( var i = 0; i < objects.length; i ++ ) {

        var item = table[i]; // ITEM IS ARRAY WITH [imageurl, idstring, screenname, column, row]
        var object = new THREE.Object3D();
        object.position.x = ( item[3] * 160 ) - 1540; // X-POSITION (COLUMN)
        object.position.y = - ( item[4] * 200 ) + 1100; // Y-POSITION (ROW)

        // targets = { table: [], sphere: [], helix: [], grid: [] };
        targets.table.push(object); // PUSH OBJECT IN TABLE ARRAY (IN TARGETS ARRAY)
    }

    // SPHERE VIEW

    var vector = new THREE.Vector3();

    for ( var i = 0, l = objects.length; i < l; i ++ ) {

        var phi = Math.acos( -1 + ( 2 * i ) / l );
        var theta = Math.sqrt( l * Math.PI ) * phi;

        var object = new THREE.Object3D();

        object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi );
        object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi );
        object.position.z = 1000 * Math.cos( phi );

        vector.copy( object.position ).multiplyScalar( 2 );

        object.lookAt( vector );

        // targets = { table: [], sphere: [], helix: [], grid: [] };
        targets.sphere.push( object ); // PUSH OBJECT IN SPHERES ARRAY (IN TARGETS ARRAY)
    }

    // HELIX VIEW

    var vector = new THREE.Vector3();

    for ( var i = 0, l = objects.length; i < l; i ++ ) {

        var phi = i * 0.175 + Math.PI;

        var object = new THREE.Object3D();

        object.position.x = 1100 * Math.sin( phi );
        object.position.y = - ( i * 8 ) + 450;
        object.position.z = 1100 * Math.cos( phi );

        vector.copy( object.position );
        vector.x *= 2;
        vector.z *= 2;

        object.lookAt( vector );

        // targets = { table: [], sphere: [], helix: [], grid: [] };
        targets.helix.push( object ); // PUSH OBJECT IN HELIX ARRAY (IN TARGETS ARRAY)
    }

    // GRID VIEW

    for ( var i = 0; i < objects.length; i ++ ) {

        var object = new THREE.Object3D();

        object.position.x = ( ( i % 5 ) * 400 ) - 800;
        object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
        object.position.z = ( Math.floor( i / 25 ) ) * 1000 - 2000;

        // targets = { table: [], sphere: [], helix: [], grid: [] };
        targets.grid.push( object ); // PUSH OBJECT IN GRID ARRAY (IN TARGETS ARRAY)
    }

    renderer = new THREE.CSS3DRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.style.position = 'absolute';
    // ADD RENDERER TO CONTAINER
    document.getElementById( 'container' ).appendChild( renderer.domElement );

    // TRACKBALLCONTROLS => WHEN YOU HOLD DOWN MOUSECLICK

    controls = new THREE.TrackballControls( camera, renderer.domElement );
    controls.rotateSpeed = 0.5;

    //controls.minDistance = 500; // MAX ZOOM IN => MIN DISTANCE
    controls.maxDistance = 2500; // MAX ZOOM OUT => MAX DISTANCE
    controls.zoomSpeed = 1; // STANDARD IS 1.2
    controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];

    controls.addEventListener( 'change', render ); // RENDER ON CHANGE

    var button = document.getElementById( 'table' );
    button.addEventListener( 'click', function ( event ) {

        transform( targets.table, 2000 );

    }, false );

    var button = document.getElementById( 'sphere' );
    button.addEventListener( 'click', function ( event ) {

        transform( targets.sphere, 2000 );

    }, false );

    var button = document.getElementById( 'helix' );
    button.addEventListener( 'click', function ( event ) {

        transform( targets.helix, 2000 );

    }, false );

    var button = document.getElementById( 'grid' );
    button.addEventListener( 'click', function ( event ) {

        transform( targets.grid, 2000 );

    }, false );

    transform( targets.table, 5000 );

    //

    window.addEventListener( 'resize', onWindowResize, false );
    // WHEN PRESSED ON KEY
    window.addEventListener( 'keydown', keydown, false );

    function keydown( event ) {
    };
}

function transform( targets, duration ) {

    TWEEN.removeAll();

    for ( var i = 0; i < objects.length; i ++ ) {

        var object = objects[ i ];
        var target = targets[ i ];

        new TWEEN.Tween( object.position )
            .to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )
            .easing( TWEEN.Easing.Exponential.InOut )
            .start();

        new TWEEN.Tween( object.rotation )
            .to( { x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration )
            .easing( TWEEN.Easing.Exponential.InOut )
            .start();

    }
    new TWEEN.Tween( this )
        .to( {}, duration * 2 )
        .onUpdate( render )
        .start();

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    TWEEN.update();
    controls.update();
}

// RENDER SCENE/CAMERA
function render() {
    renderer.render( scene, camera );
}
}

我的推文最初在可变数据中。 我现在已将此添加到我的代码中:

controls.keys = [ 37 /*LEFT*/, 38 /*UP*/, 39 /*RIGHT*/, 40 /*DOWN*/ ];
window.addEventListener( 'keydown', keydown, false );
function keydown( event ) {};

但是现在如何使用键盘上的箭头浏览推文(框)？
我想更改所选框的 css 并打开相关推文的叠加层。 (当你点击链接上的一个框时你可以看到这个)

我不知道如何开始。有人可以帮助我吗？

Answer 1

您可以创建一个带有“selected”类的样式表，当您单击其中一个元素时，它会删除“selected”类的所有其他实例，并将“.selected”添加到被单击的特定元素。然后用键盘输入，你做同样的事情，但移动到下一个元素。它可以使用 jQuery 进行一些简化，尽管没有也可以完成。

.element .selected {
background-color: #cccccc;
}

JavaScript:

document.addEventListener("click", function(e) {
if (e.target === *element you want*)
// remove other selected classes code here.
document.addClass += " " + ".selected"