ホームページ

JS特殊効果

CSS3特殊効果

CSS3 選択スライダーボタンコード

ダウンロード中プレビュー

<!DOCTYPE html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<title>jQuery CSS3选择滑块按钮代コード </title>

<スタイル>
.tab-menu{
マージントップ: 20px;
高さ: 26px;
オーバーフロー: 非表示;
位置: 相対;
境界半径: 20px;
}
ウル{
パディング: 0;
マージン: 0;
リストスタイル: なし;
}
リ{
高さ: 24px;
行の高さ: 24px;
浮動小数点: 左;
テキスト整列: 中央;
位置: 相対;
フォントサイズ: 12px;
}
.tab-menu スパン{
マージン: 4px;
表示: インラインブロック;
高さ: 18px;
位置: 絶対;
左: 0;
上: 0;
境界半径: 20px;
トランジション: 左 .4 秒;
-webkit-transition: 左 .4s;
-moz-transition: 左 .4s;
}
リ:ホバー{
カーソル: ポインタ;
}
.tworow{
幅: 160px;
背景色: rgba(224, 229, 232, 1);
}
.tworow スパン{
幅: 72px;
背景色: rgba(0, 54, 80, 1);
}
.tworow .active{
色: ホワイト;
}
.tworow li{
幅: 80px;
色:rgba(0, 54, 80, 1);
}
.eightrow li{
幅: 50px;
色: ホワイト;
}
.eightrow .active{
色: #10aefc;
}
.eightrow{
幅: 700px;
背景: #10aefc;
}
.8行スパン{
幅: 42px;
背景: 白;
}
</style>

</head>
<本文>
<中央>
<div class="タブメニュー 8 行">
<span id="bg"></span>
<ul id="リスト">
<li class="active" type="1">24h</li>
<li type="2">48h</li>
<li type="3">72h</li>
<li type="4">96h</li>
<li type="5">120h</li>
<li type="6">144h</li>
<li type="7">168h</li>
<li type="8">192h</li>
<li type="9">216h</li>
<li type="10">240h</li>
<li type="11">264h</li>
<li type="12">288h</li>
<li type="13">312h</li>
<li type="14">336h</li>
</ul>
</div>

<div class="タブメニュー 2 行">
<span id="thirdbg"></span>
<ul id="時間リスト">
<li class="active" type="1">24h</li>
<li type=" 2">48h
</ul>
</div>
</center>
<スクリプト src="script/jquery.min.js"></script>
<スクリプト src="script/slide.js"></script>
<スクリプト>
新しいスライドアイコン($("#list"),{
インデックス:0,
表紙:$("#bg"),
コールバック:関数 (データ) {
console.log(データ)
}
});
新しいスライドアイコン($("#hourlist"),{
インデックス:0,
表紙:$("#thirdbg"),
コールバック:関数 (データ) {
console.log(データ)
}
});
</スクリプト>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</本文>
</html>

これは CSS3 選択スライダーボタンコードです。必要な友達は直接ダウンロードできます。その他の特殊効果コードは、PHP 中国語 Web サイトで見つけることができます。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn