ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
【JQuery】自動切り替え＋サムネイルクリックで画像切り替え ｜ Tips Note by TAM
※※※URLが変更となりました。 以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post3351.html） ブックマークをされている方はお手数ですが変更をお願いいたします。※※※ サムネイルつきのギャラリーで、キャプションつき、 画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。 まず、やりたいことをまとめます。 指定した時間で、自動的に画像やテキストが切り替わる サムネイルをクリックしても切り替わる 切り替わるエフェクトはクロスフェード 開始場所を指定できる（コメント欄参照ください） JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div clas
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
<h1 class="ex1">example1</h1> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').bxSlider(); }); </script> <div id="slider1"> <div><img src="images/slide1.png" width="300px"></div> <div><img src="images/slide2.png" width="300px"></div> <div><img src="images/slide3.png" width="300px"></div> </div> <h1>example2</h1> <script type="text/javascript"> $(document).ready(function(
https://www.egrappler.com/full-display-responsive-jquery-picture-and-content-material-sliderrslider/
jQuery Cycle Plugin | Webサイト制作支援 | ShanaBrian Website
jQuery Cycle Pluginの使用方法をご紹介します。 jQuery Cycle Pluginは様々な効果でスライドショーを簡単に実装できるjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 ダウンロードと設置 JavaScriptの読み込み 適用方法 オプションの設定 ページネーションの設置方法 オプション 効果一覧 ダウンロードと設置 こちらからダウンロードします。 ダウンロードしたJavaScriptファイルを任意の場所に設置します。 JavaScriptの読み込み 任意の場所に設置したjQueryとjQuery Cycle PluginのJavaScriptファイルを読み込みます。 パスは環境に応じて変更してください。 HTML <script src="js/jquery.min.js" type="text/javasc
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
jQueryによるXML読み込み－RSSを読み込んでみた - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） jQueryを使って、XMLファイルを読み込む方法について。 $.ajaxをつかい、 URLに読み込みたいXMLファイル名を書き、 successに、読み込み成功時に行う処理を書く。 たとえば、 Yahooの産経新聞のRSS http://headlines.yahoo.co.jp/rss/san_dom.xml を読み込み 成功時には、各itemごとに、 linkタグの内容を、リンク先（AタグのHREF)、 Titleタグの内容を表示 する、JQuaryは、こんなかんじ。 ＜html＞ ＜head＞＜title＞xmlテスト＜/title＞ ＜script type="text/javascript" src="jquery-1.4.4.min.js"＞＜/script＞ ＜/
12個のかっこいいjQueryスライドショープラグインまとめ | WEBデザインファクトリー
モニター全体に広がるメインビジュアルのサイト11つでも記事にさせていただきました。横幅いっぱいメインビジュアルですが、jqueryのスライドショーを紹介してくれているサイトをまとめてみました。簡単に実装できるのでぜひ参考にしてみてください。モニター全体に広がるメインビジュアルのサイト11つでも記事にさせていただきました。横幅いっぱいメインビジュアルですが、jqueryのスライドショーを紹介してくれているサイトをまとめてみました。簡単に実装できるのでぜひ参考にしてみてください。 Nivo Slider 下記のキャプチャと合わせて4つ紹介してくれています。 Animate Panning Slideshow with jQuery | Build Internet 斜めの動きも付いています。 デモページはこちらです。 sexyCycle 下記ページの上の方にjsファイルやCSSファイルのダウン
画像をスライドショーさせるjQueryのプラグイン | Fridayeight
jQueryプラグインの中でもダントツに人気が高いモノの1つにスライドショーがありますね。スライドショーのプラグインもやはり数多くありますが、今回は「Slides」の使い方を解説してみます。 Slides » http://slidesjs.com/ 実際の操作はデモファイルよりご確認ください。 プラグインファイルのダウンロード(zipファイル) 使用するライブラリファイル jqueryライブラリファイル本体 jquery.easing.1.3.js ダウンロードしたファイルより slides.min.jquery.js global.css jquery.easing.1.3.jsはアニメーションやエフェクトの動作をまとめたプラグインです。 global.cssにて見栄えの設定をしています。 jqueryライブラリファイルの詳細は「jQueryの使い方」にて解説しています。
レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js
Modified 2014-06-08 更新情報 記事公開時とオプションや設定方法など変わっていた点が多数あったため、現在の方法へオプションを書き換えました。 ResponsiveSlides.jsは、レスポンシブで792KBの軽量かつシンプルなスライドショーのjQueryプラグインです。Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので、定番として使えそうです。 「サンプル」も作ってみましたが、設置も簡単にできました。シンプルなマークアップで使いやすいです。 デモ ResponsiveSlides.js · Responsive jQuery slideshow Slideshow 1 はシンプルに画像がフェードしながら切り替わります。 Slideshow 2 は画像の切り替えをページナビで行います。 ダウンロード viljamis
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.iosscripts.com/iosslider/
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html
Unformed Building