(function(){ var timer_id; var i = 0; timer_id = setInterval((function(){ console.log(i); i++; if (i == 10) { clearInterval(timer_id); } }), 1000); })(); 結論としては、ライブラリの物を使うのがいい。
(function(){ var timer_id; var i = 0; timer_id = setInterval((function(){ console.log(i); i++; if (i == 10) { clearInterval(timer_id); } }), 1000); })(); 結論としては、ライブラリの物を使うのがいい。
はじめに 以前こんな記事を投稿しました。ノンデザイナー・デザイン初心者向け、デザイン虎の巻 上記記事では、デザインという漠然とした問いに対して、キモとなりそうな点をツラツラと挙げています。その中でレイアウトを知るという項目があります。これはプログラミングにおいても役に立つ重要な知識ではないかと思いました。 そこでレイアウトという1デザインメソッドをベースに、ソースコードの整形について具体的に考えてみました。もし何かの参考になれば幸いです。 前提条件 ここでのデザインとは設計のような上流・大きなものではなく、コードの見た目に関すること、表面的で単純なものです 名前やコメントの整形もある意味デザインとしても考えられますが、ここではレイアウトのみを取り上げたいと思います サンプルコードはJavaScriptになります(考え方なので他言語でも応用できるかと思います) 目次 デザインのおさらい 良い
画像の一覧など画面上にコンテンツ要素をたくさん並べられたWebページでは ページのロード時に順々に要素を読み込んでアニメーション表示したり 見せ方を変えることで様々な印象を与えているWebサイトをよく見かけます。 そういったコンテンツ要素が一覧で並べられたページで 要素を簡単にランダムでフェードアニメーション表示させることができる jQueryプラグイン「champagne.js」がとても便利そうだったのでご紹介。 champagne.js | fresh tilled soil champagne.js | fresh tilled soil 使い方もとても簡単で、 まずHTML側ではベースとなるコンテンツ要素に 任意のクラス(「.champagne」とします)をつけて、 ランダムで表示させたい各要素を並べます。 <ul class="champagne"> <li><img src="
ダイナミックなかわいいアニメーションでパネルのレイアウトを変更する、レスポンシブ用のレイアウトを生成するjQueryのプラグインを紹介します。 デモページ DyLayの使い方 Step 1: 外部ファイル 「jquery.js」と「easing.js」と当スクリプトを外部ファイルとして</bpdy>の上に記述します。 <script src="http://code.jquery.com/jquery.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/dylay.js"></script> Step 2: HTML 各パネルはリスト要素で配置し、フィルタやソート用のデータをclassやdata属性に仕込んでおきます。 <ul id="dylay"> <li style="width:
メディアは、手段にすぎない。 実行力のないコンサルティングは、無意味だ。 私たちAIADは、違います。 どこまでも課題ファーストで考える。 1978年の創業から鍛えぬいたファッション思考で、 ソリューションを導きだす。 ひとつひとつの課題に、統合化されたソリューションを。 クライアントの声にまっすぐ向き合う。 課題の先へ、さらに先へ。深く潜り、ビジョンを捉える。 そして浮上しながら、他にはないアクションを起こしていきます。 それは、才気あふれるクリエイターの広告かもしれない。 流通システムの改善かもしれない。 最先端のデジタルプロモーションかもしれない。 人材育成という一歩踏みこんだ提案かもしれない。 データは完璧ではない。だからこそ、持ちうる限りの知恵や感性を注ぐ。 すべては、ブランドの未来につながるビジネスモデルのために。 ファッションの未来を構築する。それが、私たちの使命です。
数十ファイルもののillustratorCS5で作成されたファイルを CS3バージョンに保存し直して欲しいと依頼が。 数が半端じゃないので、スクリプトにチャレンジ。 素人工事なので、間違いとか、無駄な処理があるよとか、 あればアドバイスお願いします! 作ること2時間。 なんとか、動いてくれたけど、いちいち、ファイルを開くのは、 時間がかかる・・・。開かずに処理できる方法はないのかな。 参考 下記サイトのスクリプトを参考にさせていただきました! ありがとうございます。 イラレCS2からCSへのファイル形式のバージョン変更 http://okwave.jp/qa/q2890296.html 日刊デジタルクリエイターズ ■クリエイター手抜きプロジェクト[253]Illustrator CS/CS2/CS3/CS4/CS5編 サブフォルダ内にある全てのAIファイルを開く/古籏一浩 http://b
DTPを楽にするために、Illustrator、InDesignなどのフリーウェアを中心にJavaScriptやAppleScriptでコントロールする方法を公開しています。 ほとんど更新していませんがスクリプトは今でも書いています。 保存.jsx IllustratorCS3で現在開いているドキュメントを 指定されたタイプ(AI、PDF、EPS) 指定されたバージョンで次々に保存していきます。 そして閉じていきます。 保存しないで閉じる.jsx IllustratorCS3で現在開いているドキュメントを ただ保存しないで閉じます。昔のドキュメントをいっぱい開いてしまって 閉じるたびに保存しますかと聞かれてうっとおしいときに便利です。 ■■■使い方■■■ Illustratorドキュメントを開いている状態で使用してください。 実行すると タイプ(AI、PDF、EPS) バージョン(8、9、
Thinking to create a website? Of course, to sustain in this fast moving culture, you should have a website on your own.Now having an appealing and informative quality web site becomes a compulsion. Because through the websites, you can broaden your business and your thoughts by interacting with more people. While beginning, you may land … Read more How do you feel if there is an interface for crea
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (clic
新着情報一覧などのように全て見せる必要がない(スクロールして閲覧可能)場合に、そのコンテンツだけスクロールさせて見せることがよくあります。 CSSで高さを固定してやることによりそれ以上の高さが必要な場合には、自動的にスクロールバーが表示されるのですが、何よりも見た目がダサいです。そんな時、jScrollPaneを使うとスクロールバーのデザインを変更することができます。 jQueryのプラグインであるjScrollPaneの使い方をご紹介。 jScrollPaneとは スクロールバーのデザインを変更するためのjQueryのプラグインです。本体のJavaScriptとCSSの他にjquery.mousewheel.jsも併用し動作します。 現時点で最新版の「v2.0.0beta11」を例としています。ダウンロードは、本家サイトから行ってください。 jScrollPaneの使い方 <!DOCTY
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ:Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
速度を数字で調節する際はカッコのなかの""は不要。jquery.jsを加えるのも忘れずに。 <script type="text/javascript"> $(document).ready(function() { $('#wrapper').fadeIn("slow"); }); </script> html <div id="wrapper"> ここにコンテンツ </div> css #wrapper{ display: none; } 追記【2012/7/19】:Flash部分には反映されないようです。 関連記事 ドロワーメニューjQuery Drawerコピペ用ソース jQuery でタブ切り替えコンテンツ jQuery トグル開閉 jQuery: ページの読み込み時にフェードイン jQuery で target="_blank" を使わず別ウィンドウ
HOME>jQuery>7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない
2011年5月21日 ロールオーバー時の画像とは別に、カレント時の画像も設定できるロールオーバーjQueryプラグインを作りました。 あらすじ ナビゲーション用の画像は3種類用意されるケースがよくあると思います。通常時の画像、ロールオーバー時の画像、もうひとつが、アクティブなページを表す画像です。 よく見かけるjQueryのロールオーバープラグインは、通常時の画像を「image.png」、ロールオーバー時の画像を「image_on.png」などにしておき、マウスオーバー時に画像を差し替えているものが多いです。ただし、これだとアクティブなページに別の画像を使おうとした際に、ちょっとややこしくなります。 このjQurtyロールオーバープラグインは、ナビゲーション部分に共通のHTMLを使っていても、アクティブページ用の画像を表示することが可能です。 ダウンロード 似たようなプラグインを配布してま
概要 WebアプリケーションやWebサイトを構築するときにヘッダーやサイドバー領域などにメニューやタブを(アコーディオンや短冊型など)配置するデザインが一般的かと思います。 このようなデザインでは現在表示されているページのメニューには class=”active” などと指定してフォーカスを当てるようになっていることが多いですね。 全てのページをべたで静的HTMLとして作る場合はいいですがメニューやサイドバーを共通部品としてSSIやサーバーサイドのテンプレートエンジンでインクルードしている場合はどうやってメニューにフォーカスを当てようか思案のしどころです。 このような場面で使えそうなアイディアを紹介します。 アイディア jqueryを使ってonload時にメニューにフォーカスを当てる(classを追加する)ようにします。 まず、メニューのフォーカスを当てたい要素には menu_ではじまるi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く