84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
スワイパータブ切り替え 各ボタンをクリックしてスワイパーコンテナを移動させるにはどうすればよいですか
たとえば、NetEase の上部のタブ切り替えでは、各ボタンをクリックすると、タブ切り替えコンテナがスクロールします (1: 左右にスクロールでき、コンテンツがコンテナ全体を占めます)
http://3g.163.com/touch/auto?...
业精于勤,荒于嬉;行成于思,毁于随。
横スクロール.topnav_list
.topnav_list
デモを作りました: https://codepen.io/anon/pen/d...
基本的な機能のみを実装しているため、移動位置はあまり正確ではありません。実際に使用する場合は、移動量を自分で調整する必要があります。
原則は、各 .topnav_item 绑定一个 onClick 的 listener。当点击元素时,取得该元素在 topnav_list 中的 index,然后把 .topnav_list を幅 * インデックス距離だけ左にシフトすることです (正確な値ではないため、調整する必要があります)。
.topnav_item
onClick
topnav_list
DEMOではES2015の一部の構文を使用していますので、実際に使用する場合はブラウザの互換性にご注意ください。この図は、jQuery の .scrollLeft() メソッドを使用することで手間を省きます。実際に使用する場合は、自分で実装することができます。
.scrollLeft()
横スクロール
.topnav_list
デモを作りました: https://codepen.io/anon/pen/d...
基本的な機能のみを実装しているため、移動位置はあまり正確ではありません。実際に使用する場合は、移動量を自分で調整する必要があります。
原則は、各
.topnav_item
绑定一个onClick
的 listener。当点击元素时,取得该元素在topnav_list
中的 index,然后把.topnav_list
を幅 * インデックス距離だけ左にシフトすることです (正確な値ではないため、調整する必要があります)。DEMOではES2015の一部の構文を使用していますので、実際に使用する場合はブラウザの互換性にご注意ください。この図は、jQuery の
.scrollLeft()
メソッドを使用することで手間を省きます。実際に使用する場合は、自分で実装することができます。