トップjQueryとオンライン顧客サービスサイトのサイドバー

レンダリング：
すべてのコード：
<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
	<TITLE> </ TITLE> 
	<スタイルタイプ= "テキスト/ cssの"> 
	* {マージン：0;パディング：0;} 
	UL {リストスタイル：なし;} 
	.slide { 
		位置：固定されました。
		右：0; 
		トップ：200pxの。
		Zインデックス：100; 
		幅：54px; 
		高さ：275px; 
	} 
	.slide UL李{ 
		幅：54px; 
		高さ：54px; 
		フロート：左; 
		位置：相対; 
		border-bottom：1pxの固体＃444; 
	} 

	.slide ULリチウムの.slideボックス{ 
		位置：絶対。
		トップ：0; 
		右：0; 
		幅：54px; 
		高さ：54px; 
		色：#FFF; 
		バックグラウンド：
		不透明度：0.8;  
	ます。<script type = "text / javascriptの" SRC = 'JS / jqueryの-2.0.3.min.js'> </ SCRIPT>
		フィルタ：アルファ（不透明度= 80）。
		フォントサイズ：14px; 
		オーバーフロー：隠されました; 
		行の高さ：54px; 
	} 
	.slide ULリチウムの.slideトップ{ 
		幅：54px; 
		高さ：54px; 
		行の高さ：54px; 
		表示：インラインブロック。
		背景：＃000; 
		不透明度：0.8; 
		フィルタ：アルファ（不透明度= 80）。
		トランジション：すべての0.3秒。
	} 
	.slide ULのリチウム.slideトップ：ホバー{ 
		不透明：1。
		フィルタ：アルファ（不透明度= 100）。
		背景：＃1 ae1c1c。
	} 
	.slide ULリチウムのIMG { 
		フロート：左; 
	} 
	</スタイル> 
	<スクリプトタイプ= "テキスト/ javascriptの"> 
	$（関数（）{ 
		$（ "ULのリチウムをスライド"）。（関数（）{ホバリング
				
			$（この）.find（"ボックスをスライド"）。（停止） .animate（{ 
				"幅"： "124px" 
			}、200）の.css（{ 
				"不透明"： "1"、
				"フィルタ"： "アルファ（不透明度= 100）"、
				"背景"： "＃1 ae1c1c" 
			}）

		}、関数（）{ 
			$（この）.find（ "ボックスをスライドさせます。 "）（停止）アニメーション。。（{ 
				"幅"：" 54px" 
			}、200）の.css（{ 
				"不透明"： "0.8" 、
				"フィルタ"： "アルファ（不透明度= 80）"、
				"背景"： "＃000"
			}）
		}）
		$（）（関数（）{をクリックし、 "トップをスライド。 " 
			$（" HTML、体"）アニメーション（{ 'scrollTopスプライト'：0}、500）; 
		}）
	}）
	</スクリプト>
</ HEAD> 
<ボディスタイル= "高さ：2000px;"> 
				の<divクラス= 'スライドボックス'>

 
<DIVクラス= 'スライド'>

	<UL> 
		<LI> 
			<a href="javascript:;"> 
				の<divクラス= 'スライドボックス'> 
					<IMG SRC = "IMG / side_icon01.png">客服中心
				</ DIV> 
			</a>の
		</ LI> 
		<LI> 
			<a href="javascript:;"> 
				の<divクラス= 'スライドボックス'> 
					<IMG SRC = "IMG / side_icon02.png">客户案例
				</ DIV> 
			</a>の
		</李> 
		<LI> 
			<a href="javascript:;"> 
				の<divクラス= 'スライドボックス'> 
					<IMG SRC = "IMG / side_icon03.png">新浪微博
				</ DIV> 
			</a>の
		</ LI> 
		<LI> 
			<a href="javascript:;"> 
					<IMGのSRC = "IMG / side_icon04.png"> QQ客服
				</ div>の
			</a>の
		</ LI> 

		<LI> 
			<のhref = "javascriptの:;" クラス= 'スライドトップ'> 
				<IMG SRC = "IMG / side_icon05.png"> 
			</a>の
		</ LI> 

	</ UL> 
	
</ div> 

</ BODY> 
</ HTML>
デイリーシェア効果添付動画：https://www.3mooc.com/front/couinfo/999
トップjQueryとオンライン顧客サービスサイトのサイドバー

おすすめ
