ポップアップでスライドショーとかはよくあるのですが、だただた、画像やテキストが切り替わるものを探していたらちょうどいいのがあったので。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#list').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
}
);
</script>
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>
<ul id="list">
<li>
<a href="#n1">りんご</a>
</li>
<li>
<a href="#n2">みかん</a>
</li>
<li>
<a href="#n3">パイナップル</a>
</li>
</ul>
参考URL:http://medienfreunde.com/lab/innerfade/
2011年05月30日
2011年05月26日
jQuery:live関数について
jQueryのlive関数はjQuery1.3からの機能で、登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
ですので、動的に後から追加されたlist等の要素に対してイベントを適用することが可能です。
○指定可能イベント
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
○サンプル
$("#item").live("click", function(){
$(this).after("sample");
});
参考サイト:http://semooh.jp/jquery/api/events/live/type,+fn/
ですので、動的に後から追加されたlist等の要素に対してイベントを適用することが可能です。
○指定可能イベント
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
○サンプル
$("#item").live("click", function(){
$(this).after("sample");
});
参考サイト:http://semooh.jp/jquery/api/events/live/type,+fn/
-
- Posted by at 06:02
- | jQuery/ JavaScript
-
- 0 Comment |
- 0 Trackback |
2011年05月19日
jQuery:様々なサイズの要素をfloatさせて整列させるプラグインjQuery Masonry
様々なサイズの要素をfloatさせて整列させることの出来るプラグイン「jQuery Masonry」を使ってみました。
今回、色々なサイズの画像を詰めて並べたいと思ったらこんなプラグインがありました!
導入も簡単なので使いやすかったです。
参考にさせていただいたページはこちら。
http://desandro.com/demo/masonry/docs/
まず、jquery.jsとjquery.masonry.jsをダウンローし、下記のように読み込みます。
そして、main.jsに導入用のソースを書きます。
・index,htmlの内容
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/main.js"></script>
・・・
<div id="item" class="wrap">
<div class="box col1">
<img src="'img_thumb.jpg'" alt="" width="150" />
</div>
<div class="box col1">
<img src="'img_thumb.jpg'" alt="" width="150" />
</div>
</div>
・style.cssの内容
.wrap {
margin-bottom: 20px;
clear: both;
}
.box {
position: absolute;
float: left;
}
.col1 {
width: 150px;
margin: 0 0 0 7px;
padding: 0 0 10px 0;
}
.col1 img {
max-width: 150px;
}
.wrap:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
・main.jsの内容
$(function(){
columnMasonry();
});
function columnMasonry(){
$('#item').masonry({
columnWidth: 163,
singleMode: true,
animate: true
});
}
今回、色々なサイズの画像を詰めて並べたいと思ったらこんなプラグインがありました!
導入も簡単なので使いやすかったです。
参考にさせていただいたページはこちら。
http://desandro.com/demo/masonry/docs/
まず、jquery.jsとjquery.masonry.jsをダウンローし、下記のように読み込みます。
そして、main.jsに導入用のソースを書きます。
・index,htmlの内容
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/main.js"></script>
・・・
<div id="item" class="wrap">
<div class="box col1">
<img src="'img_thumb.jpg'" alt="" width="150" />
</div>
<div class="box col1">
<img src="'img_thumb.jpg'" alt="" width="150" />
</div>
</div>
・style.cssの内容
.wrap {
margin-bottom: 20px;
clear: both;
}
.box {
position: absolute;
float: left;
}
.col1 {
width: 150px;
margin: 0 0 0 7px;
padding: 0 0 10px 0;
}
.col1 img {
max-width: 150px;
}
.wrap:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
・main.jsの内容
$(function(){
columnMasonry();
});
function columnMasonry(){
$('#item').masonry({
columnWidth: 163,
singleMode: true,
animate: true
});
}
-
- 0 Comment |
- 0 Trackback |