フロントエンドの学習を開始して以来、私は通常、ブラウザで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プラクティス)など。
上記は、この記事で共有されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。