Question

正在询问是否有办法使我的卡片在网站上水平移动，类似于在流行部分This post上的tubikstudi上的卡片

Answer 1

这只是一个简单的示例，但您可以明白要点-如何做到这一点。

var view = $("#tslshow");
var move = "100px";
var sliderLimit = -750;
$("#rightArrow").click(function(){
    var currentPosition = parseInt(view.css("left"));
    if (currentPosition >= sliderLimit)         view.stop(false,true).animate({left:"-="+move},{ duration: 400})
});

$("#leftArrow").click(function(){
    var currentPosition = parseInt(view.css("left"));
    if (currentPosition < 0) view.stop(false,true).animate({left:"+="+move},{ duration: 400});
});

.bstimeslider {
  width:500px;
  height:40px;
  background:#ccc;
  position:relative;    
}
.bktibx {
  float:left;
  margin:0 40px 0 0 ;
  font-size:18px;
  width:60px;
  display:block;
  background:#000;
  color:#fff;
}
#tslshow {
  position:absolute;
  left:0;
  width:1200px;
}
#leftArrow {
  width:40px;
  height:40px;
  background:#ff0000; 
  position:absolute;
  left:0px;
}
#rightArrow {
  width:40px;
  height:40px;
  background:#ff0000; 
  position:absolute;
  right:0px;
}
#viewContainer {
  width:360px;
  height:100%;
  background:#00ff00;
  position:absolute;
  left:50%;
  margin-left:-180px;
  overflow:hidden; 
}

<div class="bstimeslider">
    <div id="rightArrow"></div>
    <div id="viewContainer">
        <div id="tslshow">
            <div class="bktibx"> 12:00   </div>
            <div class="bktibx"> 12:30   </div>
            <div class="bktibx"> 13:00   </div>
            <div class="bktibx"> 13:30   </div>
            <div class="bktibx"> 14:00   </div>
            <div class="bktibx"> 14:30   </div>
            <div class="bktibx"> 15:00   </div>
            <div class="bktibx"> 15:30   </div>
            <div class="bktibx"> 16:00   </div>
            <div class="bktibx"> 16:30   </div>
            <div class="bktibx"> 17:00   </div>
            <div class="bktibx"> 17:30   </div>
         </div>
    </div>
    <div id="leftArrow"></div>
</div>

Answer 2

选中此链接，可以解决您的问题： https://jsfiddle.net/6nsr30we/

.container {
	width: 30em;
	overflow-x: auto;
	white-space: nowrap;
  scrollbar-width: none;
}
.container::-webkit-scrollbar { 
    display: none; 
}

	table, th, td {
		border: 1px solid black;
	}
	
	th, td {
		padding: .5em 1em;
	}

<div class="container">
	<table>
		<thead>
			<tr>
				<th>Column A</th>
				<th>Column B</th>
				<th>Column C</th>
				<th>Column D</th>
				<th>Column E</th>
				<th>Column F</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Row 1 Cell 1</td>
				<td>Row 1 Cell 2</td>
				<td>Row 1 Cell 3</td>
				<td>Row 1 Cell 4</td>
				<td>Row 1 Cell 5</td>
				<td>Row 1 Cell 6</td>
			</tr>
			<tr>
				<td>Row 2 Cell 1</td>
				<td>Row 2 Cell 2</td>
				<td>Row 2 Cell 3</td>
				<td>Row 2 Cell 4</td>
				<td>Row 2 Cell 5</td>
				<td>Row 2 Cell 6</td>
			</tr>
			<tr>
				<td>Row 3 Cell 1</td>
				<td>Row 3 Cell 2</td>
				<td>Row 3 Cell 3</td>
				<td>Row 3 Cell 4</td>
				<td>Row 3 Cell 5</td>
				<td>Row 3 Cell 6</td>
			</tr>
		</tbody>
	</table>
</div>

在我的示例中，滚动条被隐藏，就像在您给我们提供的示例网站上一样。

Answer 3

我正在谈论轮播帖子，只需看看http://kenwheeler.github.io/slick/#demos

这是一支笔，具有与您想要的组件完全相同的组件。

from bokeh.plotting import figure
import numpy as np
import pandas as pd
from bokeh.io import curdoc
from bokeh.layouts import column


from bokeh.models import Button
from bokeh.layouts import widgetbox


from bokeh.plotting import ColumnDataSource

button = Button(label='Update Data')

def generate_time_differences(n=1000, skew_p=0.1, mean=0, std=1, skew_mean=1, skew_std=6):
    normal_dist = np.random.normal(loc=mean, scale=std, size=int(n * (1 - skew_p)))
    skewed_dist = np.random.normal(loc=skew_mean, scale=skew_std, size=int(n * skew_p))

    return np.append(normal_dist, skewed_dist)


def generate_plot_data(data, density=True, bins=50):
    hist, edges = np.histogram(data, density=density, bins=bins)

    df = pd.DataFrame({'top': hist,
                         'left': edges[:-1],
                         'right': edges[1:]}

                      )
    df['mean'] = [np.mean(data) for i in range(len(df))]
    df['std'] = [np.std(data) for i in range(len(df))]
    df['n'] = [len(data) for i in range(len(df))]

    return ColumnDataSource(df)


def create_histogram(plot_data_control, plot_data_observed, title, x_axis_label='Milliseconds',
                     y_axis_label='Frequency'):

    mean_control = np.mean(plot_data_control.data['mean'])
    mean_observed = np.mean(plot_data_observed.data['mean'])

    color_observed = 'yellow' if mean_observed > mean_control else 'green'


    p = figure(plot_height=150, plot_width=600,
               title=title,
               x_axis_label=x_axis_label,
               y_axis_label=y_axis_label)

    # Add a quad glyph for plot_data
    p.quad(source=plot_data_control, bottom=0, top='top', left='left', right='right',
           fill_color='gray', line_color='gray', fill_alpha=0.5, line_alpha=0.5, legend='Control')
    # Add another quad glyph for plot_data2
    p.quad(source=plot_data_observed, bottom=0, top='top', left='left', right='right',
           fill_color=color_observed, line_color=color_observed, fill_alpha=0.5, line_alpha=0.5, legend='Observed')
    return p

def update():

    mean = np.random.randint(500,1500)
    std = 100
    skew_mean =  2000
    skew_std = 500

    new_plot_data = generate_time_differences(n=100, skew_p=0.1, mean=mean, std=std, skew_mean=skew_mean, skew_std=skew_std)

    plot_data2.data =  generate_plot_data(new_plot_data).data


data = generate_time_differences(n=1000, skew_p=0.1, mean=1000, std=100, skew_mean=2000, skew_std=500)
data2 = generate_time_differences(n=100, skew_p=0.1, mean=1050, std=100, skew_mean=2100, skew_std=500)


plot_data = generate_plot_data(data)
plot_data2 = generate_plot_data(data2)


p1 = create_histogram(plot_data, plot_data2, 'Status1 to Status2')

button.on_click(update)

layout = column(widgetbox(button), p1)

curdoc().add_root(layout)

https://codepen.io/EngCode/pen/Vvppdy

如何使我的卡在浏览器上水平移动？

3 个答案: