JavaScript 実装 Baidu 翻訳 折りたたみ可能な共有ボタン list_javascript スキル

フロントエンドを勉強し始めてから、ブラウザ上で優れたコントロールを見ると自分でも実装したくなるんですよね。次に、元のコントロールを Baidu Translate の右下隅から取得します。画像に示すように、注意深く検索すると見つかるはずです。

非常に面白く、実装も複雑ではないので、練習に適しています。さて、これ以上ナンセンスはやめて、コードに直接進みましょう。

HTML コード:

コードをコピーします コードは次のとおりです:

<頭>
                                                                                                                                                                                                         

showsfer
                                                                                  ＆lt; li title = "qq space" class = "li1"＆gt;＆lt;/li＆gt;

& Lt; リティ = "リッカー ネットワーク" & gt; & lt;/li & gt; ＆lt; li title = "baidu" class = "li5"＆gt;＆lt;/li＆gt;
＆lt; li title = "douban.com" class = "li6"＆gt;＆lt;/li＆gt;

& Lt; タイトル = "ハッピー ネットワーク" クラス = "li8" & gt;
                                                                                       





CSSコード:

コードをコピー

コードは次のとおりです:

*{
  マージン:0px;
  パディング:0px;
}
#ズーム{
  位置: 絶対;
  上: 20px;
  右: 200px;
  ボーダー: 1px ソリッド rgb(38,147,255);
  高さ: 40px;
  幅: 40px;
}
#ズーム >スパン{
  表示: インラインブロック;
  位置: 絶対;
  上: 0px;
  下: 0px;
  左: 0px;
  幅: 40px;
  背景画像: url(sprite.png);
  背景繰り返し: 繰り返しなし;
  背景位置: -5px -7px;
  不透明度: 0.8;
  フィルター:アルファ(不透明度=50);/*IE78*/
}
#ズームウル{
  表示: なし;
  位置: 絶対;
  上: 0px;
  下: 0px;
  左: 50px;
  リストスタイル: なし;
}
#ズームウルリ{
  表示: インラインブロック;
  *表示: インライン;/*IE7*/
  *ズーム:1;/*IE7*/
  *マージン左: 5px;/*IE7*/
  幅: 16px;
  高さ: 16px;
  margin-top: 12px;
  背景画像: url(sprite.png);
  背景繰り返し: 繰り返しなし;
}
#zoom .li1{
  背景位置: -57px -20px;
}
#ズーム .li2{
  背景位置: -77px -20px;
}
#ズーム .li3{
  背景位置: -98px -20px;
}
#ズーム .li4{
  背景位置: -119px -20px;
}
#zoom .li5{
  背景位置: -140px -20px;
}
#ズーム .li6{
  背景位置: -161px -20px;
}
#ズーム .li7{
  背景位置: -182px -20px;
}
#zoom .li8{
  背景位置: -203px -20px;
}

#zoom li:hover{
  カーソル: ポインタ;
  不透明度: 0.8;
  フィルター:アルファ(不透明度=50);/*IE78*/
}
#ズームスパン:ホバー{
  カーソル: ポインタ;
  不透明度: 1;
  フィルター:アルファ(不透明度=100);/*IE78*/
}

js代码：

复制代码代码如下:

var ズーム = (関数(){
varzoomDom = document.getElementById('zoom'),
state = {opened: false、onaction: false、length: 0},
showSpan、
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();
} else {
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';
setTimeout(onOpen, 0)
}
};
/*コントロールを閉じる*/
var onCollapse = function(){
If(state.length 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 Translate から直接取得^_^):

それをダウンロードし、名前を変更してルート ディレクトリに置くか、CSS に次の 2 つの場所を直接追加します。

コードをコピーします コードは次のとおりです:

背景画像: url(sprite.png);

が

に変更されました

コードをコピーします コードは次のとおりです:

背景画像: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);

It is also possible to directly use the image resource I uploaded (thanks to the powerful Internet^_^).

The following is a demonstration of the effect I achieved:

Then let me talk about the main technical points in the writing process:

The control is compatible with IE7. I don’t have IE6 at hand, so I can’t test it. The main compatibility issues to be solved are marked in the code.
It uses css sprites technology, you should have discovered it by now^_^, good technology should be used.

Apply closures in JS to avoid global pollution.

In HTML, the script tag is placed at the bottom of the body. I will also notice this small detail (although they are all local resources ╮(╯▽╰)╭).
Okay, that’s it, but there is still room for further improvement in this small control. For example, you can use css3 attributes to achieve dynamic scaling of divs, you can componentize this control, and you can use the JQ framework to implement it more conveniently (JQ Practice) )etc.

The above is all the content shared with you in this article, I hope you will like it.