フロントエンドの学習を開始して以来、私は通常、ブラウザでO（∩_∩）Oを自分で実装したい未解決のコントロールを見ます。この気持ちがあるのだろうか。次に、私はあなたと共有します。元のコントロールは、Baidu翻訳の右下から来ています。図に示すように、あなたはそれを注意深く見つけることができます：
それは非常に興味深いと感じ、実装するのが複雑ではなく、練習に適しています。わかりました、あまり話さないで、コードをアップロードしてください。
HTMLコード：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = 'utf-8'/>
<Title> Zoom </title>
<link rel = "styleSheet" type = "text/css" href = "zoom.css"/>
</head>
<body onload = "zoom（）">
<div id = 'zoom'>
<span title = "share ..."> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javascript" src = "zoom.js"> </script>
</body>
</html>
CSSコード：
コードコピーは次のとおりです。
*{
マージン：0px;
パディング：0px;
}
＃ズーム{
位置：絶対;
トップ：20px;
右：200px;
境界線：1pxソリッドRGB（38,147,255）;
高さ：40px;
幅：40px;
}
#zoom> span {
ディスプレイ：インラインブロック。
位置：絶対;
上：0px;
下：0px;
左：0px;
幅：40px;
背景イメージ：url（sprite.png）;
バックグラウンドリピート：ノーリピート。
バックグラウンドポジション：-5px -7px;
不透明度：0.8;
フィルター：アルファ（不透明= 50）;/*ie78*/
}
#zoom ul {
表示：なし;
位置：絶対;
上：0px;
下：0px;
左：50px;
リストスタイル：なし;
}
#zoom ul li {
ディスプレイ：インラインブロック。
*ディスプレイ：インライン;/*ie7*/
*ズーム：1;/*ie7*/
*マージン左：5px;/*ie7*/
幅：16px;
高さ：16px;
マージントップ：12px;
背景イメージ：url（sprite.png）;
バックグラウンドリピート：ノーリピート。
}
#zoom .li1 {
バックグラウンドポジション：-57px -20px;
}
#zoom .li2 {
バックグラウンドポジション：-77px -20px;
}
#zoom .li3 {
バックグラウンドポジション：-98px -20px;
}
#zoom .li4 {
バックグラウンドポジション：-119px -20px;
}
#zoom .li5 {
バックグラウンドポジション：-140px -20px;
}
#zoom .li6 {
バックグラウンドポジション：-161px -20px;
}
#zoom .li7 {
バックグラウンドポジション：-182px -20px;
}
#zoom .li8 {
バックグラウンドポジション：-203px -20px;
}
#zoom li：Hover {
カーソル：ポインター;
不透明度：0.8;
フィルター：アルファ（不透明= 50）;/*ie78*/
}
#zoomスパン：Hover {
カーソル：ポインター;
不透明：1;
フィルター：アルファ（不透明= 100）;/*ie78*/
}
JSコード：
コードコピーは次のとおりです。
var zoom =（function（）{
var zoomdom = document.getElementById（ 'Zoom'）、
state = {opened：false、onaction：false、length：0}、
showpan、
ul;
if（ZoomDom.FirstelementChild）{
showspan = zoomdom.firstelementchild;
ul = showspan.nextelementsibling;
} else { /*ie* /
showspan = zoomdom.firstchild;
ul = showspan.nextsibling;
}
/*IE78互換登録イベント方法*/
var addevent = function（el、eventtype、eventhandler）{
if（el.addeventlistener）{
el.AddeventListener（eventType、eventHandler、false）;
} else if（el.attachevent）{
el.Attachevent（ 'on' + eventType、eventHandler）;/*ie78*/
}
};
/*IE互換デフォルトイベントブロッキング方法*/
var stopdefault = function（e）{
if（e && e.preventdefault）{
E.PreventDefault（）;
} それ以外 {
window.event.returnvalue = false;/*ie*/
}
};
/*コントロールを展開*/
var onopen = function（）{
if（state.length> 250）{
ul.style.display = 'inline-block';
state.onaction = false; state.opened = true;
}それ以外{
if（！state.onaction）{state.onaction = true;}
state.length += 10;
Zoomdom.style.Width = state.length + 'px';
setimeout（onopen、0）
}
};
/*コントロールを閉じる*/
var oncollapse = function（）{
if（state.length <41）{
state.onaction = false; state.opened = false;
}それ以外{
if（！state.onaction）{state.onaction = true;}
state.length- = 10;
Zoomdom.style.Width = state.length + 'px';
Settimeout（Oncollapse、0）;
}
};
/*トリガーボタンのコールバックをクリックします*/
var onspanclick = function（e）{
stopdefault（e）;
if（！state.onaction）{
if（！state.opened）{
onopen（）;
}それ以外{
ul.style.display = 'none';
oncollapse（）;
}
}
};
return function（）{
AddEvent（showspan、 'click'、onspanclick）;
};
}）（）;
次の写真は、CSSで使用されている写真です（画像 ^ _ ^ Baidu翻訳から直接）：
みんな、名前を変更してルートディレクトリに置くか、CSSに2つの場所を直接配置します。
コードコピーは次のとおりです。
背景イメージ：url（sprite.png）;
変更：
コードコピーは次のとおりです。
背景 - イメージ：url（http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png）;
また、直接アップロードした画像リソースを使用しても構いません（強力なインターネット^_^のおかげで）。
次は私が達成した効果です：
執筆プロセス中の私の主な技術的ポイントについて話しましょう：
コントロールはIE7と互換性があり、手元にはIE6がないため、テストすることはできません。解決された主な互換性の問題は、コードにマークされています。
CSS Spritesテクノロジーを使用すると、 ^_ ^を発見する必要があります。優れたテクノロジーを使用する必要があります。
世界的な汚染を避けるために、JSの閉鎖を適用します。
HTMLスクリプトタグでは、この小さな詳細にも気付きます（ただし、すべてローカルリソース（）です）。
まあ、それだけですが、この小さなコントロールにはまださらなる改善の余地があります。たとえば、CSS3属性を使用してDIVの動的なスケーリングを実現できます。このコントロールをコンポーネント化し、JQフレームワークを使用してより便利に実装できます（JQプラクティス）など。
上記は、この記事で共有されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。