Javascript 滑动面板，如何复制它们？

我可能在这里深陷其中，我对JavaScript和jQuery还不熟悉， 但我想尝试创建一个类似spotify的面板系统

请看这张图片：

在Spotify player网站上，当您单击艺术家或歌曲/专辑等内容时， 如果您单击其他内容，它将在屏幕右侧的最顶部面板中滑动， 一个新的面板将出现在它的位置，前面的面板将被添加到我称之为屏幕左侧的面板堆栈中

以下是Spotify：

我想了解如何在JavaScript/jquery中实现这一点，是否有人可以分享一些输入

我试过的：（）

我知道我的尝试很糟糕，这就是我来这里的原因

var idx = 0;
var panels = [];
var numpanels = 0;

function panel () {
    this.id = 0;
    this.active = false;
    this.container = {};
}

var panelmgr = new function () {
    this.Create = function (lpPanel) {

        //set all current panels to inactive 
        //and then push them left
        for (var i = 0; i < panels.length; i++) {
            panels[i].active = false;
            panels[i].container.css("left", "10%");
        }

        //set the newest panel to Active and Top Most
        lpPanel.container.css("z-index", 10000);
        lpPanel.container.css("left", "25%");

        //setup some info for the new panel
        lpPanel.id = numpanels++;
        lpPanel.active = true;

        //add it to array
        panels.push(lpPanel);
    };
}

$(".box").click(function (e) {            
    var id = $(this).attr("id");
    var selected = -1;

    //find the panel we've selected and retrieve the index
    for (var i = 0; i < panels.length; i++) {
        if (id == panels[i].container.attr("id")) {
            selected = I;
            break;
        }                    
    }

    //do we have a valid selected panel?
    if (selected >= 0) {

        //Make all panels not selected
        for (var i = 0; i < panels.length; i++) {
            panels[i].active = false;
            panels[i].container.css("left", "10%");
        }

        //now make the panel we selected 
        //the top most panel
        panels[selected].active = true;
        panels[selected].container.css("z-index", 10000);
        panels[selected].container.css("left", "25%");
    }



});

$(document).ready(function () {

    var p1 = new panel();
    var p2 = new panel();
    var p3 = new panel();
    var p4 = new panel();
    var p5 = new panel();

    p1.container = $("#panel1");
    p2.container = $("#panel2");
    p3.container = $("#panel3");
    p4.container = $("#panel4");
    p5.container = $("#panel5");

    panelmgr.Create(p1);
    panelmgr.Create(p2);
    panelmgr.Create(p3);
    panelmgr.Create(p4);
    panelmgr.Create(p5);
});

var idx=0；
var面板=[]；
var numpanels=0；
功能面板（）{
此参数为0.id；
this.active=false；
this.container={}；
}
var panelmgr=新函数（）{
this.Create=函数（lpPanel）{
//将所有当前面板设置为非活动
//然后向左推
对于（变量i=0；i=0）{
//使所有面板未选中
对于（变量i=0；i
检查此
小提琴
：

做css的事情。我不是这方面的高手

您的CSS:：

.sidebar{
    width:10%;
    background-color:#000;
    color:#FFF;
    height:800px;
    float:left;

}
.box{
    width:7%;
    float:left;
    height:800px;
    background-color:red;
    border:1px solid #000;
}
.active{
    width:64%;
    float:right !important;
     -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

你的Html代码


边栏

检查此
小提琴
：

做css的事情。我不是这方面的高手

您的CSS:：

.sidebar{
    width:10%;
    background-color:#000;
    color:#FFF;
    height:800px;
    float:left;

}
.box{
    width:7%;
    float:left;
    height:800px;
    background-color:red;
    border:1px solid #000;
}
.active{
    width:64%;
    float:right !important;
     -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

你的Html代码


边栏

您可能不应该更改CSS。基本上，您需要两个div，一个包含“面板”列表，另一个包含单个“面板”的详细视图。我将此问题分解为若干子问题：

1） 从服务器获取面板对象列表，并动态填充左div，很可能是包含面板信息的子div。换句话说，在页面加载时，需要运行一些代码，在列表中循环并在左侧div中添加div，每个面板一个div，这些片段的CSS应该处理它们的布局和所有内容。一个简单的开始可能是为列表中的每个项目添加一个按钮，或者添加一个图像，等等

2） 事件处理程序，以便当您单击列表中的面板时，它会将详细视图加载到右侧的div中。这也可能会从列表中删除该面板，或以某种方式对其进行视觉更改（将其灰显）或其他任何操作

3） 如果项目已加载到右div中，则在右div中显示详细信息，如果未加载，则执行其他默认操作

简化所有这些的一种方法可能是将面板和详细视图作为预构建页面，并将它们加载到iFrame之类的主页中。
您可能不应该更改CSS。基本上，您需要两个div，一个包含“面板”列表，另一个包含单个“面板”的详细视图。我将此问题分解为若干子问题：

1） 从服务器获取面板对象列表，并动态填充左div，很可能是包含面板信息的子div。换句话说，在页面加载时，需要运行一些代码，在列表中循环并在左侧div中添加div，每个面板一个div，这些片段的CSS应该处理它们的布局和所有内容。一个简单的开始可能是为列表中的每个项目添加一个按钮，或者添加一个图像，等等

2） 事件处理程序，以便当您单击列表中的面板时，它会将详细视图加载到右侧的div中。这也可能会从列表中删除该面板，或以某种方式对其进行视觉更改（将其灰显）或其他任何操作

3） 如果项目已加载到右div中，则在右div中显示详细信息，如果未加载，则执行其他默认操作

简化所有这些的一种方法可能是将面板和详细视图作为预构建页面，并将它们加载到iFrame之类的主页中。
简而言之，您的原始代码存在一些问题。下面是我试图使当前代码集正常工作的尝试（底部有改进建议。请参阅，了解如何在不更改大部分原始代码的情况下正常工作的代码。我还修改了原始代码以使用css tra
$(function(){
    $(".box").click(function(){
        $(".box").removeClass("active");
        $(this).addClass("active");
    }); 
});

//Increment height
var ii = 0;
for (var i = 0; i < panels.length; i++) {
    if(panels[i].active == false){
        panels[i].container.css("top", ii*30+"px");
        ii++;
    }
}

panels[i].container.css("z-index", "1");

<div id="panel5" class="box">
    <div class="panelTitle">Panel 4</div>
    <div class="contents">Stuff to display</div>
</div>

//Make all panels not selected
for (var i = 0; i < panels.length; i++) {
    //other code emitted for space...
    //hide the contents
    panels[i].container.find(".contents").css("display","none");
}

//now make the panel we selected 
//the top most panel
panels[selected].active = true;
panels[selected].container.css("z-index", 2);
panels[selected].container.css("left", "25%");
panels[selected].container.css("top","0px");
//it's active, so display the contents
panels[selected].container.find(".contents").css("display","block");

transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;

function Panel (jobj) {
    if(typeof jobj === "undefined") throw new ReferenceError("Bad value passed to constructor");
    if(typeof jobj.id === "undefined") throw new ReferenceError("Missing an id");
    this.id = 0;
    this.active = false;
    if(typeof jobj.title === "undefined") throw new ReferenceError("Missing panel title");
    this.title = jobj.title;
    //set to passed value, or if doesn't exist, default to empty array;
    this.tracks = jobj.tracks || [];
}

var DiscoverPanel = function(jsonObj){
    if(typeof jsonObj === "undefined")throw new ReferenceError("Expecting a JSON object but received none");
    var panel = new Panel(jsonObj);
    if(typeof jsonObj.genre === "undefined") throw new ReferenceError("Missing genre!")
    panel.genre = jsonObj.genre;
    return panel;
}

<ul id="stack"></ul>
<div id="current"></div>

//there are plenty of ways to generate the id within the constructor if hard coding
//it bugs you, your post showed a means of doing so.
var p1 = new Panel({title:"Panel 1",id:"p1"});
var p2 = new Panel({title:"Panel 2",id:"p2"});
var dp = new DiscoverPanel({title:"discover",id:"dp",genre:"rock"});
//etc.
var pn = new Panel({title:"Panel n"});
var panels = [p1,p2,dp,...,pn];

$(document).ready(function () {
    generateList();
}
function generateList(){
    var stack = document.getElementById("stack");
    stack.innerHTML = "";
    panels.forEach(function(panel){
        var item = document.createElement("li");
        item.setAttribute("id",panel.id)
        item.innerHTML = panel.title;
        item.onclick = function(){
            //load this specific panel to the current
            loadCurrent(panel);
            //regenerate the stack
            generateList();
        }
        stack.appendChild(item);
    });
}

function loadCurrent(panel){
    panel.active = true;
    var cur = document.getElementById("current");
    //Figured table was a good example, but you could get as creative as you want
    //using floats, divs, etc. Could also check the types and handle different types of panels
    var table = document.createElement("table");
    panel.tracks.forEach(function(track){
        var row = document.createElement("tr");
        var td = document.createElement("td");
        td.innerHTML = track.number;
        row.appendChild(td);
        //repeat for whatever other values you have for a track
        //you'd likely add a play function or something of that sort to each.
        table.appendChild(row);
    });
    table.appendChild(cur);
}

display: none