タグ

tipsと*JSに関するyukeeのブックマーク (17)

  • 百姓快三-中国有限公司

    百姓快三【正规信誉大平台】❤️小美提供❤️百姓快三登录入口,百姓快三网址,百姓快三官网,百姓快三平台,百姓快三app,百姓快三下载,百姓快三在线购彩,百姓快三用户注册,...

    百姓快三-中国有限公司
    yukee
    yukee 2014/07/24
  • スクロールに応じて固定する見出しが切り替わる

    Result jQueryfunction Up() { $(".head").each(function() { var el = $(this), offset = el.offset(), s = $(window).scrollTop(), f = $(".floating", this); //位置に応じて表示/非表示の条件分岐 if ((s > offset.top) && (s < offset.top + el.height())) { f.css({ "visibility": "visible" }); } else { f.css({ "visibility": "hidden" }); }; }); } $(function() { var clone; $(".head").each(function() { //要素のクローンを作成してスクロールに追従させる c

    スクロールに応じて固定する見出しが切り替わる
    yukee
    yukee 2014/04/23
  • javascriptにおけるスコープとクロージャについて - 今日もスミマセン。

    クロージャとかスコープの理解が自分の中であいまいなので整理しておく。 スコープについて javascriptにおけるスコープはfunction単位 ブロックレベルのスコープは無い 変数はそれが作成されたスコープのプロパティ webブラウザ内で実行される場合、グローバルスコープはwindowオブジェクト。なので、グローバル変数は実はwindowオブジェクトのプロパティになっている。 var hoge = 'hage'; // hoge == window.hoge functionスコープにおいて var 無しで 変数に代入を行った場合は、グローバルなスコープにプロパティが追加される。(webブラウザで実行されている状況ではwindowオブジェクトのプロパティになる) function test() { hoge = 'hage'; } // hoge == window.hoge クロージ

    javascriptにおけるスコープとクロージャについて - 今日もスミマセン。
    yukee
    yukee 2014/01/14
  • jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる

    jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる 通常はマウスホイールでのスクロールするとピタッと止まりますが、止まるときに余韻が残ったりするとなんだかリッチな感じがしますよね。 ということでjQueryで、その動きを作ってみました。 投稿日2011年08月10日 更新日2011年08月10日 プラグインのダウンロード jQueryはもちろんのことですが、ここではマウスホイールを検出するために「MOUSE WHEEL EXTENSION」と、かっこよくスクロールするために「jquery.easie.js」というプラグインを使用します。 MOUSE WHEEL EXTENSION jquery.easie.js javascript javascriptのコードは以下のようになります。 javascript <script type="text/javascript"

    jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる
    yukee
    yukee 2013/11/20
  • jQueryを使った一定以上スクロールすると上に固定される横メニュー

    最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l

    jQueryを使った一定以上スクロールすると上に固定される横メニュー
  • Geekなぺーじ : Google MAPS APIプログラミング

    ここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript APIを使うと、グーグル社が提供する衛星写真や地図を使ってホームページ上で色々なものを作れます。 対象とする読者は初心者もしくは入門者です。 Google Maps APIJavaScriptを使って書いてあるので、JavaScriptの知識があった方がわかりやすいと思いますが、Java Scriptがわからなくても何と無くわかるような説明を目指したいと思っています。 基Google Maps APIの単純な例 地図の種類を切り替える 地図の中心を移動する 地図上にふきだしを表示 地図がクリックされたときの処理 マップタイプコントロールを無効にする 緯度経度取得ツール 要望が多いので緯度経度情報を取得するツールを

    yukee
    yukee 2013/08/08
  • IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法

    Respond.js とは IE6〜8などCSS3メディアクエリーの min/max-width に対応していないブラウザのための、高速で軽量なpolyfillです。MITとGPL2のデュアルライセンスで公開されています。 このスクリプトのいいところはメディアクエリー非対応のブラウザでメディアクエリーを使えるようにするという1点に用途を絞っているところです。 ファイルは極力小さくなるように設計されており、メディアクエリー対応ブラウザではできるだけ早いタイミングで処理を中断するようになっているので、パフォーマンスにあまり影響を与えません。 また、他のライブラリーに依存しないのも高ポイントです。 使い方は簡単で、JSファイルを通常通り読み込ませるだけです。Respond.js がHTMLから呼ばれているCSSを正規表現で解析し、表示しているブラウザのウィンドウサイズによってメディアクエリーを解

    yukee
    yukee 2013/08/07
  • jQueryプラグインを使わずに自前カルーセルパネルを導入してみる | 1:n – DETELU Blog

    カルーセルパネル系のjQueryプラグインはかなり数が多いのですが、今回はjQuery体のみ利用しプラグインを利用せず自作してみます。CSSJavascriptを数行書き換えるだけで横型、縦型の2つが作れます。 プラグインを使わずにカルーセルパネル 横型 プラグインを使わずにカルーセルパネル 縦型 ではでは横型のカルーセルパネルを作っていきます。まずはHTMLCSSでカルーセルパネルの表示部分をつくります。内容を表示させるボックスを指定して、その中にリスト横並びに並べることにしましょう。両端にはリストを動かすボタン(「id=prev」「id=next」)を置き、これはCSSで配置を制御します。で、できたものは下記↓。 プラグインを使わずにカルーセルパネル HTMLCSSのみ ■HTML <div id="carouselwrap"> <div id="prev" class="hi

    yukee
    yukee 2013/04/19
  • や...やっと理解できた!JavaScriptのプロトタイプチェーン - maeharinの日記

    JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた!以下、情報ソースはなるべくECMAScript仕様書(3rd)を元にするようにして書きました なぜ分かりづらいのか? そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか?自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう

    や...やっと理解できた!JavaScriptのプロトタイプチェーン - maeharinの日記
    yukee
    yukee 2013/03/13
  • Googleマップをイラストマップみたいにしたい。

    サイト制作において、アクセスマップなどの地図の表示はどうしてますか?「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ!というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました(2015.7.20追記)。 まずはしっかり抑えておきたい「Google Maps APIの基」から。 基をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基 Google マップはGoogle API キーを発

    Googleマップをイラストマップみたいにしたい。
    yukee
    yukee 2013/02/06
  • creatorish.com

    This domain may be for sale!

    yukee
    yukee 2013/01/18
  • Backbone.jsのカレンダー | Advent Calendar 2011 - Qiita

    URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)

    Backbone.jsのカレンダー | Advent Calendar 2011 - Qiita
    yukee
    yukee 2012/11/27
    backboneあれこれ
  • HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

    そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け(※自分含む)のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス(parallax)を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript(jQuery)でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

  • JavaScriptでパーティクル « きんくまデザイン

    こんにちは。きんくまです。 JavaScriptを勉強中なんで、パーティクルを作成してみました。 Flashのインタラクティブな部分がJSによってどのくらい置き換わっていくのか興味があります。 →パーティクルをみる 画面をクリックすると、四角いパーティクルがとぶようになっています。 タイマーでFPSを60に設定してあります。 各ブラウザで実行速度を比較してみたところ面白かったので、観察メモを書きます。 ■IE7 実行速度が遅い。だけど、ガベコレでガクっとなることがない。 ■Firefox3 実行速度がIEより全然速い。だけど、Choromeより遅い気がする。ガベコレでときどきガクっとなって止まることがある。 ■Chorome 一番実行速度が速い。ガベコレもなくて一番スムーズ。 ただ、今回のソースの作り方やjQueryとの相性の問題もあると思うので、ブラウザそのものの性能というわけではないと

    yukee
    yukee 2012/10/15
    パーティクル
  • やっと理解できた!JSオブジェクト指向プログラミング再入門 | ゆっくりと…

    既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど!」 っていう、頭の中のスイッチがパチンッ!と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java

    yukee
    yukee 2012/02/08
  • JavaScriptの再利用とapply

    私がこういうの大嫌いなのは一部では有名な話ですが、職場では寛容に、ネット上では偏屈に、がポリシーなので素直に流しました。

    JavaScriptの再利用とapply
    yukee
    yukee 2010/05/12
    applyの使い方について
  • GoogleマップAPIの使い方を分かりやすく解説! - Google Maps 活用講座

    yukee
    yukee 2009/03/24
  • 1