クリックさせないリンク jdtRunAway.js

Webサイトに欠かせないものといえば、何を思いつきますか?やはりリンクじゃないでしょうか。そもそもリンクがなければ他のページに移動することもできませんし。

リンクがクリックしにくかったら…まあうざいでしょうね。
そんな素敵なプラグインをつくってみました。

導入方法

1. jQueryとjDTLightBoxを読み込む


3. 実行する

$()で対象にする要素を指定します。(サンプルではアンカーに適用していますが、きっとなんにでも使えるはず)

jQuery(function($) {
  $('a').jdtRunAway();
});

オプション

やりすぎると大体重くなる

オプション項目 内容
rate アニメーションフレームみたいなもの。増やすとなめらかになる反面重くなります
instance 反発する距離みたいなもの。大きくするとすぐ逃げます

注意

アハハハハ つかまえてごらーん

Thanks

アニメーション部分のソースはさんが以下の記事で作成していたものを、許可を得て転用しています。こんなばかなプラグインのために、、快諾していただきありがとうございます。

jQueryでマウスから逃げるRunAwayFromMouse書いてみた Part2 | HouseTect, JavaScript Blog

何か役に立つことがあったらシェアしてみてください

このエントリーをはてなブックマークに追加

Comments: 3 - Leave a comment

  1. terra

    いつも、楽しく拝見させて頂いております。
    このたのしいJSなんとかHPで使ってみたく
    お尋ねします。
    教えていただけますか?
    勉強不足ですみません。

    div { position : relative}
    img {position : abusolute
    top : ○○
      }
    のように動かす要素imgに親divがいる。

    のように親divにpositionプロパティ指定して
    imgをrunawayさせようとすると
    imgが急にウインドーの右下に移動して
    その位置でrunaway をしています。
    上記の様マークアップの時、元の位置で正常に反応させるには
    どうしたらいいのでしょうか?

    お手数をおかけします。

  2. tomotomo

    liとか指定しちゃうと崩壊ですね。
    でも面白いです

  3. 自然派

    へぇ~!
    面白いですね。考えつきもしなかったですw

Leave a comment

Trackbacks: 0

Trackback URL for this entry
Listed below are links to weblogs that reference
クリックさせないリンク jdtRunAway.js from 5509

Author

nori
nori
- UI Engineer
Location
- ,