そこで、ソーシャルアカウントへのリンクをサイトに配置することにしました。 ネットワーク。 すぐにサイドバーに配置しましたが、ソーシャルネットワークのアカウントへのすべてのリンクを配置するフローティングパネルを作成することにしました。
他のサイトでも同様のパネルを見てきましたが、既成のプラグインを探したときに自分に適したものは見つかりませんでした。 まあ、正直なところ、私はそれを本当に見つけたくありませんでした。 そこで、最初のjQueryプラグインを作成することにしました。
私のフローティングパネルのアイデアは次のとおりです。ページをスクロールしている間、常に目立つ場所にあります。 また、パネルの初期透明度が追加され、ページを下にスクロールすると、パネルがスムーズに表示されます。
したがって、ユーザーがサイトの素材に精通して好きになったとき、ソーシャルネットワークアカウントへのリンクを含むパネルがスムーズに表示されます。 マウスをリンクの上に置くと、リンクが透明にならず、10ピクセルずつ横に移動します。
その結果、 jquery.socializer.jsプラグインが誕生しました 。これは柔軟な設定が可能で、あらゆるサイトに適しています。
Webサイト上のソーシャルネットワーク上のブックマークで同様のパネルを作成するには、jQueryライブラリとプラグイン自体を接続する必要があります。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.socializer.js"></script>
次に、リンク付きのフローティングブロックを作成する必要があります。 私にとってはこのように見えます：
<div class="soc_buttons" id="soc_buttons"> <a title=" twitter" target="_blank" href="http://twitter.com/ivanshamshur"><img src="/images/icons/twitter_new.png" ></a> <a title=" facebook" target="_blank" href="http://www.facebook.com/ivan.shamshur"><img src="/images/icons/facebook_new.png"></a> <a title=" RSS" target="_blank" href="http://feeds.feedburner.com/biznesguide"><img src="/images/icons/rss_new.png"></a> </div>
終了タグの直前に配置する必要があります。
ちなみに、このブロックには好きなものを配置できます！
スタイルを処方できます：
.soc_buttons { position: absolute; right: 0; top: 152px; width: 70px; } .soc_buttons a { display: block; position: relative; }
次はプラグイン自体の呼び出しです。
<script type="text/javascript"> $(function(){ $('#soc_buttons').socializer(); }) </script>
この行は、デフォルトのパラメーターでプラグインを呼び出します。 以下のパラメーターの完全なリストを参照してください。
- type-スライド-フローティングパネルのタイプ。 スライド-フローティング、固定-固定。 つまり、ページをスクロールするとき、パネルの位置は特定の高さに固定されるか、常に下にスライドします。
- position-right-フローティングパネルの場所。 右-右、左-左。
- opacity-0.1-ページをロードするときのパネルの初期透明度。 0から1の値が利用可能です。
- container-document-フローティングパネルの透明度が変化するブロック。 つまり、このブロックの一番下までスクロールすると、透明度は1になります。
- inittop-150-画面の上部からの初期距離（ピクセル単位）
- scrolltop-20-ページをスクロールするときの画面の上端からの距離
- 速度-300-アニメーション期間（ミリ秒）
- hoverdistance-15-ホバーするときにソーシャルメディアアイコンが移動するピクセル単位の距離
- scrollend-false-コンテナーが下の境界に到達したときに呼び出されるカスタム関数。 パラメータとして、オブジェクトn
- fx-linear-アニメーション制御機能
素晴らしい効果を得るには、プラグイン-jquery.easing.jsを使用する必要があります
使用例：
$(function(){ $('#soc_buttons').socializer({ position: 'left', type: 'fixed', scrolltop: 50, opacity: 1 }); });
この例では、指定されたパラメーターでプラグインを初期化します。 このコードを使用すると、フローティングパネルが画面の左側に配置され、ページをスクロールすると、画面の上端から50ピクセルの固定位置が占有されます。 透明度は1に設定されます。これは、パネルが常に表示されることを意味します。
透明度を変更する相対的なページのブロックを指定する必要がある場合は、プラグインへの次の呼び出しを使用する必要があります。
$(function(){ $('#soc_buttons').socializer({ container: '#id_blocka' }); });
つまり、ブロックIDを示し、ポンド記号を前に置きます。
プラグインは非常にシンプルです。必要に応じて、ニーズに合わせてリメイクできます。
このリンクからソースをダウンロードできます
デモページはこちらからご覧ください。
これは私の最初のプラグインなので、厳密に判断しないでください。 このプラグインの改善にご協力いただければ幸いです！