Home > jQuery

jQuery Archive

[jQuery] Image Slider/News Ticker Clone

Simple News/Image Sliderみたいに画像を１列に並べて延々横スクロールさせるやつがjQueryで欲しかったんだけど
検索してもそういうのが見つからなかったからクローン作った。

見た目と動きはオリジナルと大体同じです。

The Code

ターゲットに指定できるのはリスト要素（ULまたはOL）限定です。リスト（LI）の中身は問いません。

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2. $('#target').imageSlider();
  3. });
PLAIN TEXT
CSS:
  1. #target {overflow:hidden;}

親要素もしくはwrap要素にoverflow:hiddenしておくこと。
ターゲットに指定された要素にはリストの横幅の合計がセットされます。
表示範囲を限定したい場合はプラグインが作成するwrap要素をoverflow:hiddenにしてwidthを設定してください。

Option

className (string)
wrap要素のクラス名。デフォルトはslider-wrapper
speed (number)
スクロールのduration。デフォルトは3000
easing (string)
スクロールのeasing。デフォルトはlinear

Continue reading

[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン

jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。

このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ

以下デモはＩＥ以外だと何も表示されません。
View Demo »

jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。

ダウンロード：jAnalogIE

Continue reading

[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する

殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。

wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。

jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。（1.2.6と1.3.2でしか確認してない）

Header

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
  3. <script type="text/javascript">
  4. //<![CDATA[
  5. $(document).ready(function(){
  6.     $("#main").jExternalLink();
  7. });
  8. //]]>
  9. </script>

上記指定で#main以下にあるaタグを全てチェックします。

Continue reading

[jQuery]hrefのURLがフルパスの時だけ別窓を開く

jQuery1.2.6用。別窓開くスクリプトの超簡易サンプル。
aタグを捜査してhrefに書かれたURLがhttpから始まってる場合のみtarget="_blank"を追加する。

PLAIN TEXT
JavaScript:
  1. $("a").each(function (i) {
  2.         if ($(this).attr('href').indexOf("http") != -1) {
  3.          $(this).attr('target','_blank');
  4.         }
  5.     });

上のはIEでスルーされたのでwindow.openで分けてみる

PLAIN TEXT
JavaScript:
  1. $("a").each(function (i) {
  2.         if ($(this).attr('href').indexOf("http") != -1) {
  3.             if(jQuery.browser.msie){
  4.                 $(this).attr('onclick','window.open('this.href','status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes'); return false;');
  5.             }else{
  6.              $(this).attr('target','_blank');
  7.             }
  8.         }
  9.     });

[jQuery]イメージマップでTooltip表示するサンプル

「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない？」って言われて書いたやつ。
非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。

jQuery1.2.6用。

jQueryのマウスイベントには以下プロパティ提供されていて

  • pageX/Y ： ページの左上を0としたマウスポインタの位置
  • clientX/Y ：　ブラウザのドキュメント表示領域を0としたマウスポインタの位置

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。

Continue reading

 Page 1 of 2  1  2 »

ホーム > jQuery

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
  • そしてこのSQLはわれながらよく書いたと思う 2010-11-15
  • CSVの列っていう方がいいのかな…118項目だった 2010-11-15
  • 楽天のCSVの項目が116個もあった衝撃 2010-11-15
  • オフィスで香水臭振りまくのは迷惑だと知れ 2010-11-15
  • ぐあー　フレグランステロやー 2010-11-15
  • More updates...

Powered by Twitter Tools

Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top