ページを追加する方法、庭でクリック漢字や英語でのブログの愛を見えます

私は誰か他の人のブログは少し学んで見栄え見て、独自のインタフェースを作ったわずか数日CSDN公園からブログに移動します。

最初のステップは、JSを購読することです

第二段階は、ページ全体のレイアウトを変更するには

HTMLは、オンライン多くをカスタマイズすることができ、私はので、私は最初のブログの設定ポイントのオープンを見つけ、公式のインタフェースを見つける方法を、変更していない公式の非常に素晴らしいと思います

2.ダブルクリックして、あなたの好みの背景を選択することができますを開いた上で次の図のページ位置を探します

愛からページや文字の上に第三のクリックを追加する方法

1. CSSコードの文字

//汉字部分的CSS代码
の.text - ポップアップ{ 
    アニメーション：textPopup 1秒。
    赤色; 
    ユーザー - 選択：なし; 
    白 - スペース：NOWRAP。
    位置：絶対; 
    Z -index：99 。
} 
textPopup {@keyframes
     0％、100％{ 
        不透明度： 0 。
    }
    の5％{ 
        不透明度： 1 。
    }
     100％{ 
        変換：移動Yを（ - は50px）。    
    } 
}
 </スタイル>

2.漢字jsのコード

VaRのfnTextPopup = 機能（ARR、オプション）{
     // 編曲参数是必须的
    ならば（編曲：||！！arr.length）{
         返します。    
    } 
    // 主逻辑 
    VARインデックス= 0 。
    document.documentElement.addEventListener（ 'クリック' 、関数（イベント）{ 
        VAR X = event.pageX、Y = event.pageY; 
        VAR eleText =のdocument.createElement（ 'スパン' ）; 
        eleText.className = 'テキストポップアップ' 。
         この.appendChild（eleText）;
         場合（ARR [インデックス]）{ 
            eleText.innerHTML= ARR [インデックス]; 
        } そうでなければ{ 
            インデックス = 0 ; 
            eleText.innerHTML = ARR [0 ]; 
        } 
        // ムービー自体を終了削除 
        eleText.addEventListener（ 'animationEnd' 、関数（）{ 
            eleText.parentNode.removeChild（eleText） ; 
        }）; 
        // 位置 
        eleText.style.left =（X - eleText.clientWidth / 2）+ 'PX' ; 
        eleText.style.top =（Y - eleText.clientHeight）+ 'PX' ;
         // インデックスインクリメント 
        指数++ ; 
    }）;     
};
 
fnTextPopup（
[「繁栄」、「民主主義」、「文明」、「調和」、「自由」、「平等」、「公正」、「法の支配」、「愛国心」、「プロフェッショナリズム」、「完全性」、「親しみやすさ」]）;

3.ラブJSコード部分

// 次のコードは、ハートで
私は++）{IF（心[i]は、α<= 0）{document.body.removeChild（心[I] .EL）。hearts.splice（I、1）。持続する; }心[I] .y--。心[I] .scale + = 0.004。心[i]は、α -  = 0.013。心[I] .el.style.cssText = "左：" +心臓[I] .X + "PX;上部：" +心臓[I] .Y + "PX;不透明度：" +心臓[i]は、α+」。変換：スケール（ "+心臓[I] .scale +"、 "+心臓[I] .scale +"）に回転（45deg）;背景： "+心臓[I] .color。} requestAnimationFrameの（gameloop）。}関数attachEvent（）{VAR古い= typeof演算window.onclick === "機能" && window.onclick。window.onclick =関数（イベント）{古い&&古いです（）。createHeart（イベント）。}}関数createHeart（イベント）{VARのD =のdocument.createElement（ "DIV"）。d.className =「心」。hearts.push（{EL：D、X：event.clientX  -  5、Y：event.clientY  -  5、スケール：1、アルファ：1、色：randomColor（）}）。document.body.appendChild（D）。}関数CSS（CSS）{VARのスタイル=のdocument.createElement（ "スタイル"）。style.type = "テキスト/ cssの"; 試す{style.appendChild（document.createTextNode（CSS））。}キャッチ（EX）{style.styleSheet.cssText = CSS。} document.getElementsByTagName（ '頭'）[0] .appendChild（スタイル）。}関数randomColor（）{戻り "RGB（" +（~~（Math.random（）* 255））+ " "+（~~（Math.random（）* 255））+"、" +（〜 〜（Math.random（）* 255））+ "）"; }}）（ウィンドウ、ドキュメント）。appendChild（スタイル）; }関数randomColor（）{戻り "RGB（" +（~~（Math.random（）* 255））+ " "+（~~（Math.random（）* 255））+"、" +（〜 〜（Math.random（）* 255））+ "）"; }}）（ウィンドウ、ドキュメント）。appendChild（スタイル）; }関数randomColor（）{戻り "RGB（" +（~~（Math.random（）* 255））+ " "+（~~（Math.random（）* 255））+"、" +（〜 〜（Math.random（）* 255））+ "）"; }}）（ウィンドウ、ドキュメント）。

注意：側のCSSコードは、一部がそこにある愛の漢字のJS部分とブログの掲示板を置くことができます。

あなたは下のコメントにページレイアウトを完了するのに役立ちます私が理解することはできません

ウィザードのアイコンを変更したい場合4.ウィザード上のコードのこの部分は、ちょうどGIFが対処するために、次のコードに置き換えられます見つける必要がフッターに直接コピーすることができます

<スタイル> 
.spig { 
    表示：ブロック; 
    幅：175px; 
    高さ：246px; 
    位置：絶対; 
    下：300ピクセル; 
    左：180ピクセル; 
    Z -index：9999 ; 
} 

#message { 
    色：＃ 191919 。
    国境：1pxの固体＃1 c4c4c4。
    背景：#ddd。
    -moz-BORDER- 半径：5pxの。
    -webkit-BORDER- 半径：5pxの。
    国境 - 半径：5pxの; 
    分 - 高さ：1EM。
    パディング：5pxの; 
    トップ： - 45px; 
    位置：絶対; 
    テキスト -揃える：センター; 
    幅：オート！重要; 
    Z -index：10000 ;
    -moz-ボックスシャドウ：0 0 15ピクセル#eeeeee。
    -webkit-ボックスシャドウ：0 0 15ピクセル#eeeeee。
    ボーダー - 色：#eeeeee。
    ボックス -shadow：0 0 15ピクセル#eeeeee。
    概要：なし。
} 
.mumu { 
    幅：175px; 
    高さ：246px; 
    カーソル：移動。
    背景：URL（のhttp：// files.cnblogs.com/files/flipped/spig.gif）ノー・リピート; 
}
 </スタイル> 


<スクリプトSRC = "https://blog-static.cnblogs.com/files/ambitionutil/spig.js"> </ SCRIPT> 
<スクリプトSRC = "http://files.cnblogs.com/files/flipped/spig.js"> </ SCRIPT> 
<！ -博客開始精灵* - >
<DIV ID = "spig" クラス = "spig"> 
    <DIV ID = "メッセージ"> ... </ div> 
    <DIV ID = "MUMU" クラス = "MUMU"> </ div> 
</ div> 

<SCRIPTタイプ= "テキスト/ javascriptの"> 
のvar ISINDEX = 真; 
VARタイトル = "" ; 
VaRの訪問者 = "这位怪蜀黍" 。
</ SCRIPT> 
<！ -精灵終了* - >

ページを追加する方法、庭でクリック漢字や英語でのブログの愛を見えます

おすすめ