[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>jQuery UIメモ 2
jQuery UIメモ 2
jQuery UIメモ 1の続き。 前回同様とくに内容はありません。
エフェクト
jQuery UIには様々なエフェクトが用意されてます。 どんなエフェクトがあるのかは下記のページにて完璧な形で例示されています。
参照サイト
サンプル
上記ページが完璧すぎて書くこともなかったので、 画像の上に半透明のレイヤーを乗せてマウスオーバーでスライドさせるという これまた探せばすぐ見つかるようなサンプル書いてみました。
これは・・・画像次第でちょっとそそる感じになりますねw
Javascript
Javascript
- $(function(){
- $('#Gallery p').each(function(i){
- var img = $(this).find('img');
- var img_height = img.height();
- var img_width = img.width();
- /**
- * イメージ上にかぶせる部分
- */
- var style_padding = 0;
- var overray_height = (img_height / 2) - (style_padding);
- var overray_width = img_width - (style_padding * 2);
- var overray_txt = img.attr('alt');
- var overray = $('<div class="imgAlt">' + overray_txt + '</div>');
- /**
- * 当たり判定用のエリア 一番上にかぶせる
- * これが無いとマウスオーバーとマウスリリースが
- * おかしくなる
- */
- var erea = $('<div class="erea"></div>');
- /* ここからCSS *********************************************/
- $(this).css({
- height: img_height + 'px',
- width: img_width + 'px',
- border: '5px solid #CCCCCC',
- position: 'relative'
- });
- overray.css({
- height: overray_height + 'px',
- width: overray_width + 'px',
- padding: style_padding + 'px',
- color: '#FFFFFF',
- fontSize: '140%',
- fontWeight: 'bold',
- lineHeight: '1em',
- overflow: 'hidden',
- backgroundColor: '#000000',
- position: 'absolute',
- top: overray_height + 'px',
- left: '0px',
- zIndex: '50',
- opacity: 0.8
- });
- erea.css({
- height: img_height + 'px',
- width: img_width + 'px',
- position: 'absolute',
- top: '0px',
- left: '0px',
- zIndex: '100',
- });
- img.css({
- border: 'none'
- });
- /* ここまでCSS *********************************************/
- erea.hover(function(){
- overray.stop(false, true).hide('slide', {direction: "down"}, 'fast');
- }, function(){
- overray.stop(false, true).show('slide', {direction: "down"}, 'fast');
- });
- overray.insertAfter(img);
- erea.insertAfter(overray);
- });
- });
HTML
HTML
- <div id="Gallery">
- <p><img src="path/to/img.gif" /></p>
- <p><img src="path/to/img.gif" /></p>
- <p><img src="path/to/img.gif" /></p>
- ・
- ・
- ・
- </div>
| 投稿日 | 2010年4月14日 04:35 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery | jQuery UI | サンプルコード |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1207 |
コメント