ドロップインで動くLightbox
リンクが張られた画像をLightbox形式で表示するようなJavaScriptを書いていた。vwとvh単位でa要素を引き伸ばして適当に前面に表示し、img要素をなんとなく拡大してから天地左右中央配置する。予めクラス指定が必要だったり、スタイルの追加が必要だったりしない、ドロップインで動作するものだ。 Demo: Lightbox with Clean Markup デモでそれぞれの画像をクリック(タッチ)すると、描画領域全体に画像が表示される。a要素をオーバーレイの背景に変え、img要素をうまく収まるように調整することになる。 if (this.href !== image.src) { image._src = image.src; image.src = this.href; } リンク先と画像のURLが違う場合は、画像がサムネイルでリンク先がフルサイズの画像とみなし、一時的に画像のリ
[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。
次のような例を考えてみる。 webページを見ていて、ページ内のリンクを辿って他のページへ遷移する マウスの場合 マウスをリンクの上に持って行く マウスカーソルの形が変わることを確認する（変わらないかも知れないが） クリックする タッチパネルのインターフェースがあれば次のようになる タッチパネルの場合 目的のリンクの上をタッチする マウス、タッチパネルのいずれにおいても、目的のリンクの上をクリック（タッチ）する必要がある。僕はよくわからないが、老眼が進行すると小さいリンク要素を俺様がなんで頑張ってクリックせねばならないのだ!!!となる可能性がありそうなので怖い。また、今もiphoneのsafariでPC用のwebページを見る時に、よくクリック（タッチ）に失敗することがあり、なんとかしたい。 ただ、どうすればいいのかわからないので、とりあえずGreasemonkeyで実験してみた。 http:
![[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。](https://cdn-ak-scissors.b.st-hatena.com/image/square/606ff252ee15e872474ed7a97fa3d663c6ad21f8/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729896483%2F12704591929883951163%2F1338491075)
近くのリンクをクリックするnewmouse.user.js - hitode909の日記
ブラウザで，リンクとかボタンとかをクリックするときに，マウスカーソルをリンクの上まで持っていくのがめんどうで，困ってた． なにもないところでクリックしたときは，勝手に近くのクリックできそうな要素をクリックしてくれればよいと思ったので，Greasemonkeyを書いた． newmouse.user.js — Gist 動画 newmouse.user.js - YouTube 使い方 Greasemonkeyをインストールすると，旧来のマウスカーソル(旧マウスカーソル)と別に，マウスカーソルがもう一個表示されるようになる(新マウスカーソル)． 新マウスカーソルはせわしなく旧マウスカーソルの周りを動きまわって，リンクを見つけると，新マウスカーソルがリンクに張り付いて，クリックできますよ，という感じになる． 旧マウスカーソルが，なにもないところで(具体的には，aや，buttonなど以外の上で)ク
くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です
とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1. そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた. とりあえずこんな風になった このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に: 時計回りにドラッグするとカウントアップ 半時計回りにドラッグするとカウントダウン します. 欠点 入力の仕方がわかりにくい*2 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3 あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
