画像の一部を拡大して別枠に表示する - 北海道苫小牧市のホームページ制作 STUDIO KEY
画像の一部を拡大して別枠に表示する 2014年09月16日 画像の一部を別枠に拡大表示する ショッピングサイトなんかで見かける、写真上の枠を移動し、その部分を拡大して表示するものを作ってみました。 写真は茅野愛衣さんです。えーと、好みのタイプでして…拾った画像なんで問題あれば差し替えます… サンプル１- 2倍 サンプル 2 -3倍 Flash使ったりなど、方法は色々あると思うのですが、作成したものはjQueryを使ったものです。やっている事は割と単純で、ドラッグする枠の左と上からの位置を取得し、倍率を掛けたものを右の枠の背景画像 background-position へ指定します。ドラッグする度にpositionが変化するので、リアルタイムに動いているように見えるって感じです。 ブラウザ対応 IE6がバツ。それ以外は大丈夫なようです。 画像の準備 仕様的には何倍でもいけますが、元画像の大
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
$.ajax と Google Analytics をシームレスに統合する jQuery プラグイン jQuery-ajaxGA | さくらたんどっとびーず
jQuery を使った Ajax ウェブアプリに、シームレスに統合可能な Google Analytics jQuery プラグイン、jQuery-ajaxGA をgithub にて公開いたしました。 sakuratan’s jQuery-ajaxGA at master – GitHub jQuery-ajaxGA の目的 この目的のセクションですが長文乙なので下の方に3行でまとめてます。読むの面倒な方はすっ飛ばしてください。テラ親切プログwww ポックンの作ったウェブサービスに、凸ただしオトコの娘に限ると←だがそれがいいというのがあります。これらは元々、※ただしイケメンに限るというネットに一時代を築いたウェブサービスのパクリとして立ち上げたものです。パクリ元の雰囲気を極力再現するため jQuery をメインに使ったアプリケーション構成となっています。ちなみに※ただしイケメンに限るは T
jQuery ソースコードを読むための参考資料一覧 - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われる(告知ページ)。みんなで jQuery のソースコードを読むイベントで、今回が2回目だ。参加者募集中です。 jQuery はファイル1つだけのライブラリなのですごい環境とかもってなくても大丈夫なんだけど、読むうえで参考になるサイトとかをまとめてみた。この辺の準備をしておくと理解が深まると思う。 ソースコード http://code.jquery.com/jquery-1.4.2.js http://github.com/jquery/jquery まずは jQuery のソースコードを取ってこないと始まらない。今回はバージョン 1.4.2 を使用する。jQuery の公式サイトから圧縮していないコードをダウンロードしよう。 それと、jQuery ソースコードは Git で管理されて
JqueryでAjax！CGIを通過後、ページ遷移なくHTMLを変化させる方法 * Devotion Time
ブログでコメントを記入したり、お問い合わせフォームに記入する場合、【送信】ボタンを押すと、通常はページが遷移します。でも、ウェブサイトのデザインによっては、CGIプログラムを稼動させながらも、イベント発生後に新しいページに飛ぶことなく、入力ページに戻ってきてほしい場合があります。それは技術的に言えば、Ajaxを駆使するということです。幸い、JQueryを使用すれば、かなりスマートに実装できます。 HTML側<form method='post' action='write.cgi' id='action'> <input type='text' id='answer1' name='ans1'> <input type='text' id='answer2' name='ans2'> <input type='submit' value='submit'> </form> id=actio
ColorPicker - jQuery plugin
About A simple component to select color in the same way you select color in Adobe Photoshop Last update 23.05.2009 - Check Download tab Features Flat mode - as element in page Powerful controls for color selection Easy to customize the look by changing some images Fits into the viewport License Dual licensed under the MIT and GPL licenses. Examples Flat mode. $('#colorpickerHolder').ColorPicker({
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
tech.kayac.comで公開されたjQuery関連記事まとめ（～2009年版） : tech.kayac.com - KAYAC engineers' blog
最近、このブログの方向性に危機感を抱いています。agoです。 そろそろあちこちで「2009まとめ」的な記事が見られるようになってきましたが、tech.kayac.comでもjQueryに特化してまとめてみたいと思います。 jQueryを使ってphpで言うところのstrip_tagsとかhtmlspecialcharsする方法 かなり簡易的な方法ですが、それぞれ一行で出来たので記事にしてみました。 JSをphp的に使用したい場合、php.jsと言うのもあるようです。 jQuery.liveをfirefoxで使うときの注意点 jQuery 1.3系でサポートされた$().live()で実際はまった問題の紹介です。 JS制作に欠かせない3つのツール Flash制作に欠かせない3つのツール・まとめ編 | エントリー | _level0.KAYAC _level0.KAYACとの連動記事です。 jQ
jQuery1.4の新機能を1.4だけに14個 - KAYAC engineers' blog
時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。 先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されているのでそちらも参照するといいと思います。 Version 1.4 ? jQuery API 新規で追加されたメソッド 1. nextUntil()、prevUntil()、parentsUntil() 指定したセレクタまでの要素を返します。以下の例ではitem3とitem4の後ろにテキストが追加されます。 <ul> <li id="item1">item1</li> <li id="item2">item2</li> <li id="item3">item3</li> <li id="item4">item4</li> <li id="item5
ポンクソフト
コンテンツ PHP入門 jQuery入門 Flash Flash(ActionScript)でゲーム作成入門 Flash(ActionScript)で様々なゲームを作ろう Flash(ActionScript)とPHPの連携入門 PHP（旧コンテンツ） PHPでファイルの読み書き・掲示板 PHPで日付・時刻の計算 PHPでアクセスカウンタ＆解析 PHPでGDを使ってみよう PHPとPostgreSQLの連携入門 Java （旧コンテンツ） Javaでシューティングゲームを作ろう Perl （旧コンテンツ） CGI(Perl)の基本と掲示板作成 C/C++ C/C++言語とDXライブラリでゲーム作成入門 （旧コンテンツ）C言語とelで様々なゲームを作ろう jQuery simple plugins ひとりごと、ふたりごと（ブログパーツ） オリジナルソフトウェア その他未分類なモノ iOSアプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Slider plugin