画像や文字をスクロール jQuery「Endless Div Scroll」

jQueryで画像や文字をスクロールさせるプラグインを見つけましたので、備忘録として記事にします。
(読み込みに時間がかかります。画像が動かない場合はしばらくお待ちください。)

ダウンロード、その他詳細はこちら→Endless Div Scroll jQuery Plugin


【使い方】

<div id="s1" class="is"><a href="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102.jpg" target="_blank"><img src="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051102-1.jpg" /></a><a href="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051114.jpg"><img src="http://blog-imgs-70.fc2.com/s/a/k/sakuraxren/2014051114-1.jpg" /></a></div>


【CSS編集部分】
.is{
border-top:5px solid #555555;
border-bottom:5px solid #555555;
background-color:#555;
}
.is img{
border:0px solid #f00;
border-left:0px solid #00f;
}




画像や文字をスクロールして表示させるjQuery「Endless Div Scroll」。マウスオーバーで動きを止めたり、流れる方向を変えたり、スピードなどを変更することができます。

<div id="s2" class="es"><span style="color:#0000FF">画像や文字をスクロールして表示させるjQuery「Endless Div Scroll」。</span>マウスオーバーで動きを止めたり、流れる方向を変えたり、スピードなどを変更することができます。</div>


.es{
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif;
font-size:14px;
margin:0px auto 0px auto;
background-color:#ff9;
-moz-border-radius: 15px;
border-radius: 15px;
border:1px solid #cccc33;
padding:4px;
}




背景色、枠線、フォント、文字の大きさを変えてみました。abcdefghijklmn ABCDEFGHIJKLMN 

<div id="s3" class="es2">背景色、枠線、フォント、文字の大きさを変えてみました。abcdefghijklmn ABCDEFGHIJKLMN </div>


.es2{
font-family:Comic Sans MS,"MS P明朝","MS 明朝",serif;
font-size:18px;
color: #fff;
margin:0px auto 0px auto;
background-color:#666;
-moz-border-radius: 5px;
border-radius: 5px;
border:3px solid #f00;
padding:4px;
}



HTML編集部分

$(window).load(function () {
$("#s1").endlessScroll({ width: '100%', height: '100px', steps: 1, speed: 30, mousestop: true });
$("#s2").endlessScroll({ width: '100%', height: '20px', steps: -1, speed: 20, mousestop: false });
$("#s3").endlessScroll({ width: '100%', height: '25px', steps: -2, speed: 60, mousestop: false });
});
width :
height : 高さ
steps : スクロールの移動ピクセル マイナス(‐)値の場合は左方向へ移動、プラス(+)値の場合は右方向へ移動
speed : 移動スピード 「0」が一番速く、数字が大きくなるとゆっくり移動
mousestop : 「ture」の場合はマウスを乗せると動きが止まり、「false」の場合はマウスを乗せても止まらない




各数字を変更したサンプル

» 続きを読む…

画像をポップアップ 「jQuery Image Flyout」設置方法

このブログでも画像を表示させるときに時々使っております「jQuery Flyout」という手法(左の画像をクリックしてください。ポップアップで大きく表示されます。)、たまにどのように設置するのかとのご質問をいただくことがあります。

「jQuery Flyout」については以前記事にしたことがあるのですが、使い方の備忘録ゆえ、設置方法は書いておりませんでした。
ご質問をいただく度にメールで説明していたのですが、今後同様の質問があった場合にこちらの記事へ誘導できるように記事にしておきたいと思います。

下記よりそれぞれファイルをダウンロードします。
それぞれのリンクを右クリックして「対象をファイルに保存」または「リンク先を保存」でダウンロードできます。
(2014年4月16日現在の最新バージョンで記事を書いています。)
2014041601.gif
 jQuery.js

「jQuery」は「1.x」と「2.x」バージョンがあるようですが、「2.x」バージョンはIE6・7・8をサポートしていないようですので「1.x」バージョンの方にしています。

2014041603.gif
 jQuery easing.jp

2014041602.gif
 jQuery image-flyout.js

FC2ではファイルをアップロードする場合、ファイル名にスラッシュやピリオドが入っているものは使えません。
ダウンロードしたファイルは「jquery-1.11.0.min.js」などのようにピリオドが入っていますので、それぞれ「.」の部分を「(ハイフン)」や「_(アンダーバー)」に変更してください。
拡張子が見えるようにしている場合は「.js」も表示されていますが、これは拡張子ですのでそのままで。(→「jquery-1-11-0-min.js」などに。)
他の2つのファイルも同様に名前を変更しておいてください。

2014041604.gifこれらをファイルのアップロード画面でアップロードします。

» 続きを読む…

スライドショー「jFancyTile」(jQuery)

jFancyTile

これもjQeryを使った楽しいスライドショーです♪

画像中の「<」「>」をクリックして下さい。
(scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてからクリックして下さい。)










CSSとスクリプトをヘッド部分に記入。

<head>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

使い方

<div id="selector">
<ul>
<li><img src="images/img01.jpg" alt="Title 01" /></li>
<li><img src="images/img02.jpg" alt="Title 02" /></li>
<!-- More images -->
</ul>
</div>

2パターンあり、別パターンはこちら。









jQueryってすごいのね~。
楽しいぃ~~(#^.^#)

それにしても……
なんだかこのブログどんどん重くなる………。
読み込みに時間がかかりすぎてるのね…(^^ゞ

» 続きを読む…

jQuery 使い方まとめ(備忘録)

今まで使ってみたjQueryまとめ。

使い方をまとめてみました。
(自分用の備忘録です。)

» 続きを読む…

画像をポップアップ 「jQuery Image Flyout」

JQuery Image Flyout

クリックすると画像がポップアップします。
画像を閉じるときは再度クリックするか、別の画像をクリック。


» 続きを読む…

画像を部分的に拡大表示「Cloud Zoom」(jQuery)

2015年7月 追記
「Cloud Zoom」は現在有料化されており、ここで紹介しているものは無料では使えなくなっています。


jQueryを使った画像の表示でお気に入りを見つけたので、備忘録として。


画像にカーソルを合わせるだけで、その部分がズームして表示されます。
画像の上にマウスを置いてみてください。
(scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてからマウスを置いて下さい。)

ダウンロード先→「Proffesor Cloud "Cloud Zoom"」

» 続きを読む…

リンク先のスクリーンショットを表示(jQuery)

前回の記事「jqueryを使ったツールチップとイメージプレビュー」で、マウスオンでリンク先のスクリーンショットを表示される方法を書きましたが、こちらは自分でスクリーンショット画像を用意して作成しなければなりませんでした。

今日紹介するのは同じくjQueryのプラグインを使って自動的にスクリーンショットを撮ってきてくれる方法です。

【サンプル】
リンク文字の上にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)
IEでは表示されませんので、IEでご覧の方は何のことやら??ですが…(^^ゞ

Yahoo!Japan     気の向くままに…


2011092401 ただし、問題がありまして……。
IEでは表示されません。
全く表示されないのであればそれはそれでよかったのですが、実際はスクリーンショットは表示されず、スクリーンショットの周りのフレームだけは表示されるという間抜けな感じに……。

2011092402.jpgそこで、フレームを付けないようにして(IEでは全く表示されないようにして)設定してやると、他のブラウザではちょっともの足りませんが、まぁ見れるかな…という感じです。

以下、導入方法と使い方です。

» 続きを読む…

jQueryを使ったツールチップとイメージプレビュー

1年ほど前の記事(記事中真ん中あたりの人名)にも使ったことがあるのですが、文字をオンマウスすると画像が表示されるようにしたことがあります。

これはjQueryプラグインを使って表示しています。

ちょっとメモしておかなければ忘れてしまいそうなので、備忘録がてら記事にしておきます。

Easiest Tooltip and Image Preview Using jQuery
↑こちらのサイトでJavaScriptの配布・説明などされていますが、FC2で使えるようにする手順を書いておきます。

↓サンプルです。
リンク文字や画像にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)

【サンプル1】
「気の向くままに…」
文字の上にマウスを置くとツールチップが表示されます。
これは「title」属性で入力した文字が表示されるのですが、通常のツールチップとは違い、CSSでチップの色などを変えることができます。


【サンプル2】
「気の向くままに…」
文字の上にマウスを置くと画像が表示されます。
サンプルではスクリーンショットを使っていますが、これは自動的にサイトのスクリーンショットを取ってくるわけではなく、自分で画像を用意しなければなりません。


【サンプル3】
「去年の彼岸花」
文字の上にマウスを置くと画像と説明文が表示されます。


【サンプル4】
中秋の名月
画像の上にマウスを置くと大きな画像が表示されます。


【サンプル5】
中秋の名月
画像の上にマウスを置くと大きな画像と説明文が表示されます。



以下導入方法です。

» 続きを読む…

javascript内でcssを読み込む

今回の記事はまるまる自分用ということでスルーお願いいたします。

javascriptに外部CSSを読み込めるように組み込む方法。

var cs = document.createElement("link");
cs.rel="stylesheet";
cs.href="http://abcdef/ghijk.css";
cs.type="text/css";
document.getElementsByTagName('head')[0].appendChild(cs);




ツールチップで説明文を表示『BoxOver』 追記

先日の「ツールチップで説明文を表示『BoxOver』」の補足です。

boxover12.jpg「boxover.js」をテキストなどで開くと、下記のような記述があります。

この記述の各値を変更すると、←のようにボックスの色合い等を変えることができます。


» 続きを読む…

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ