サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
utsutsunogare.com
透過PNGなどのアルファ値(透過度)を調べるJavascriptを作ってみました。 透過部分がどんなにあっても画像は矩形なので、リンクを付けたりした際、透過部分をクリックしても反応します。単純な図形ならイメージマップでリンクを設定することもできますが、その場合個別にエフェクトをかけたりができません。 (CSS3のborder-radiusを使えば丸みを制御することはできます。) クリック領域が広いのは悪いことじゃないので、普通はそのままでも問題ないのですが、特殊なコンテンツなどで特定領域のみをクリックできるようにしたい(例えば「キャラクター画像をクリックしたら台詞をしゃべる」みたいな)、といったときにHTMLとCSSではどうしようありません。 なので、Javascriptでなんとかできないかなと思って作ってみました。 まずはサンプルをどうぞ。 See the Pen AlphaPicker
なにかの要素をクリックしたときに動作するようなスクリプトで、Enterキーでも動作がするようにする方法のメモです。jQueryを使っています。 a要素やbutton要素のように最初からクリックすることが想定されている要素の場合、大抵のブラウザではEnterキーを押すことでクリックイベントが発火するので、問題ありません。 しかし、普通の要素(たとえばspan要素)はEnterキーを押してもクリックしたことにはなりません。 キーボードをメインに使っている人や、マウスが壊れてキーボード操作しかできない人もいるでしょうから、キー操作ができないのは問題ですね。 $(element).attr("tabindex", "0"); まずクリック操作を想定する要素にtabindex属性を付けます。これで、tabキーでフォーカスが当たるようにします。 $(element).on("click keydown
スマホ対応のWebサイトやアプリで、タップに対してなにか動作させたい時、clickイベントを使うとすこし反応が鈍く感じることがあります。 スマホなどのタッチデバイスでは、clickイベントの発火にわずかなタイムラグが設けられているからのようです(多分ダブルタップを検出するためだと思います)。 そこで、touchstartやtouchendを組み合わせてタップ動作を検出する方法がよく取られますが、より汎用的にjQueryでclickなどと同じように扱えるtapイベントを作りました。 /* jQuery Tap Event */ (function($, window) { "use strict"; var RANGE = 5, events = ["click", "touchstart", "touchmove", "touchend"], handlers = { click: fun
This domain may be for sale!
このページを最初にブックマークしてみませんか?
『utsutsunogare.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く