Latest Entries
Calendar
| << | 7月 | |||||
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Archives
- 2019年7月 (1)
- 2018年6月 (2)
- 2017年8月 (1)
- 2016年8月 (1)
- 2016年5月 (1)
- 2015年7月 (5)
- 2015年6月 (1)
- 2015年3月 (2)
- 2015年2月 (1)
- 2015年1月 (1)
- 2014年12月 (1)
- 2014年10月 (1)
- 2014年9月 (4)
- 2012年10月 (1)
- 2012年5月 (2)
- 2011年12月 (3)
- 2011年11月 (1)
- 2011年10月 (1)
- 2011年9月 (4)
- 2011年5月 (2)
- 2011年4月 (3)
- 2011年3月 (1)
- 2011年2月 (1)
- 2011年1月 (1)
- 2010年11月 (2)
- 2010年10月 (2)
- 2010年8月 (1)
- 2010年6月 (2)
- 2010年5月 (3)
- 2010年4月 (1)
- 2010年2月 (9)
- 2010年1月 (4)
- 2009年12月 (3)
- 2009年11月 (4)
- 2009年10月 (3)
- 2009年9月 (1)
Recent Comments
- VPSでBasic認証が使えない！？
⇒watanabe(2011/09/07) - デコメ送信機能を作ってみた
⇒thrive on(2010/05/27) - デコメ送信機能を作ってみた
⇒icebreaker(2010/05/27) - 携帯サイトでのセッションの利用
⇒thrive on(2010/02/10) - 複数のRSSを統合し最新情報を取得する
⇒thrive on(2010/01/08)
Links
Mobile
- スマートフォンサイトのロールオーバーについて
- 2015.02.27
- スマートフォンサイトでは、PCサイトとは違いマウスがありませんのでロールオーバー効果は表現できませんが、タップしたときにロールオーバーのような効果をつけることはスマホサイトでも可能です。 検索してもaddClass()やremoveClass()を使用したclass操作だったり、background-imageを利用した操作だったりと手間がかかるため簡単に画像を差し替えられるスクリプトを作成しました。 <img>にclassを設定するだけで、タップしたときに画像が切り替わります。 スクリプトは下記になります。 rollover.jsのような名称を付けたファイルに保存しておいて、使用するときはjQueryと一緒に読み込むようにするとソースもすっきりします。 プリロード機能もあるので、手間いらずです。 //ロールオーバー用画像のプリロード $(function(){ $(“.rollover”).each(function(){ if(String($(this).attr(“src”)).match(/_off\.(.*)$/)){ var img = new Image(); img.src = String($(this).attr(“src”)).replace(/_off\.(.*)$/,”_on.$1″); } }); }); //_offと_onを切り替える $(function(){ $(“.rollover”).bind(“touchstart”,function(){ $(this).attr(“src”,$(this).attr(“src”).replace(“_off.”, “_on.”)); }); $(“.rollover”).bind(“touchend”,function(){ $(this).attr(“src”,$(this).attr(“src”).replace(“_on.”, “_off.”)); }); }); 【使い方】 jQueryと上記のソースを外部ファイル化（rollover.js）したものを読み込んで、イメージにクラスを指定するだけです。 その際、画像のファイル名は、「_off.拡張子」というように、「_off」のついた名称にする必要があります。 <img src=”hogehoge_off.jpg” class=”rollover”>