top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1132

ドロップシャドウ(jQuery):jQueryで「ドロップシャドウ」。これも使えますねぇ。紹介記事を参考にやってみよ。画像にも自動で影つけられるし。 ・・・ 【jQueryプラグイン】

 2009-10-27
 引き続き・・・jQuery
 すでに使い尽くされているでしょうネタですが、私は初めて。
 次の記事で紹介されていた、jQuery利用した
 ・ドロップシャドウ
  これも、今のプロジェクトで使いたいんですねぇ。

jQuery でドロップシャドウ
jQuery でドロップシャドウ こちらに、丁寧な解説記事がありますね。
 かなり古いけど。
 それでも、有効でしょう。



 ・・・早速やってみます。

  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ ドロップシャドウ実装、の巻:jQueryにお世話になりっぱ
************************************************


 前述の記事、少し古いですけど、よくわかりますね。
 早速、習って・・・

 ■jquery.dropshadow.js を
  いただきに行く ・・・ と。


  あれ? リンク先ありませんねぇ。
  (例の)サイトが無くなったら、決まって現れる
   おねえさんの頁
   ◇今日のおねえさん
   (例の)サイトが無くなったら、決まって現れるおねえさんの頁


  ・プラグインのベースサイト(plugins.jquery.com
   で探したら、ページは残ってるけど、リンクありませんねぇ。
   どうしちゃったんでしょう?
   何かトラブルかなぁ。
    プラグインのベースサイト(plugins.jquery.com)
   ※仕方が無いので、上記ご紹介されてる「All ABOUT JAPAN」さんを
    参照させていただいて・・・
    (えっ?これって大丈夫? だめならやめるけど)


 ■jquery.dimensions.js こちらは健在でした。


Dimensions
Dimensions しかし、
 ・1.2.0 2007-Dec-20
 私も随分時代遅れのこと
 やってるのかな?



 ・・・とりあえず。

 ■テストサイトで実装


  どうせやるなら、
  ・動的に変化させられるように
  ・テキスト文字列も変えられるように
  ・・・・ ということで、
   ◆Drop Shadow - jQuery plugin
   こんな感じで。

   □ソース準備
    ・例によって、prototype.js とのコンフリクト避け、
     $ > j$ にすべて置き換えしておき、


   □CSSファイルと JSファイルを利用するインクルード記述

<script src="*****/jquery1_3_min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script src="*****/jquery.dimensions.js" type="text/javascript"></script>
<script src="*****/jquery.dropshadow.js" type="text/javascript"></script>

   □使い方は


j$('.myshadows').removeShadow();
j$('.myshadows').dropShadow({left:4,
top:4,
blur:2,
color:'#000000',
opacity:0.5,
swap:false});
 などとコールする。
    ・これをフォームオブジェクト利用して
     動的に変えられるようにしただけ。
   フォームオブジェクト利用して動的に変えられるように
   ふむふむ、変わりますね。

   ・でも「影」って、右下にも つけたいなぁ、と
    マイナス使えるかな? と試したら
    ・確かに使えるんですが、
     一度影ができると、そこの部分クリックできないですねぇ。
   一度影ができると、そこの部分クリックできない
     注意注意。


 よし、これにて終了!


 ?


 ほんとに?


 ・・・・・


 これでは、全然学習ができてないですねぇ。
 当然です。
 そう、思いません?


 ・・・・・


 前の投稿で、カラーピッカー覚えたばかりなのに。


 で、


 色はカラーピッカーで選択できるようにして、
   ◆Drop Shadow2 - jQuery plugin

 まぁ、デザインは全くですが、一応使えそうなので、画像などにも適用し
 プロジェクトで利用させていただきます。
 ありがとうございました。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1132-85ba1cd8
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。