googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[fc2][jQuery][プラグイン]jQueryを使ってプラグイン(3)2011-04-27(Wed)

前回から随分と時間が経ったけど
ちょっとだけ更新してみたんで記録として。

更新したのは次の通り。

・イメージにマウスを重ねたら、アニメーションを一時的に止める。
・イメージのクリックで、イメージのある記事にジャンプ。

今までのスクリプトには
できるだけ手を入れないで、jQuery.extendを使用して
継承する形で機能を追加してみた。

<style>
#test {
position:relative;
border:solid 1px #999999;
overflow:hidden;
width:200px;
height:110px;
}
#test img {
position:absolute;
max-height:100px;
max-width:100px;
top:0;
left:0;
!cursor:hand;
cursor:pointer;
}
#test a {
border:0;
padding:0;
margin:0;
}
#test .active {
z-index:10;
opacity:1.0;
}
#test .past {
z-index:5;
opacity:0;
}
#dropcat {
z-index:11;
position:absolute;
background:#777777;
width:50px;
height:80px;
opacity:0;
}
</style>
<div id="test">
<div id="dropcat"></div>
<!--image-->
<img class="past" src="<%image_url>" alt="blog-date-<%image_year><%image_month><%image_day>.html">
<!--/image-->
</div>

<script type="text/javascript" src="http://blog-imgs-45.fc2.com/c/a/k/cakey2/jquery-1-5-1-min.js"></script>
<script type="text/javascript">

(function(){
var isNotEmpty = function(o) {
return (o && o.length>0);
},
toWait = false,
SlideFrame = {
activeTimer:null,
waitTimer:null,
firstItem: function() {
return this.find("img:first");
},
activeItem: function() {
var $active = this.find(".active");
$active = (isNotEmpty($active))?$active:null;
return $active;
},
nextItem: function() {
var $active = this.activeItem();
var $next = (isNotEmpty($active))?$active.next():null;
$next = (isNotEmpty($next))?$next:this.firstItem();
return $next;
},
startSlide:function() {
clearTimeout(this.waitTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 4000);
},
waitSlide:function() {
this.waitTimer = setTimeout(jQuery.proxy(this, "startSlide"), 1000);
},
movePast:function() {
// 現在表示中のITEMを消す
var $active = this.activeItem();
var dis = this.height()+20;
var speed = 500;
clearTimeout(this.activeTimer);
if ($active) {
$active.animate({"top":dis,opacity:0.2}, speed, jQuery.proxy(this, "moveActive"));
}else{
this.moveActive();
}
},
moveActive:function() {
// 次のITEMを表示する
var $active = this.activeItem();
var $next = this.nextItem();
var speed = 500;
var pos = {fol:0,top:0,left:0,isHIn:true,isWIn:true};
pos.fol = - $next.height();
pos.top = (this.height() - $next.height()) / 2;
pos.left = (this.width() - $next.width()) / 2;
pos.isHIn = ((this.height() - $next.height()) > 0);
pos.isWIn = ((this.width() - $next.width()) > 0);
$next.css({"top":pos.fol, "left":pos.left, "opacity":0.2})
.animate({"top":pos.top, opacity:1.0}, speed, jQuery.proxy(this, "avtivateItem"));
},
avtivateItem:function() {
var $active = this.activeItem();
var $next = this.nextItem();
if ($active) {
$active.removeClass("active").addClass("past");
$next.removeClass("past").addClass("active");
}else{
$next.addClass("active");
}
this.waitSlide();
}
},
SlideFrameEvent = jQuery.extend(true, SlideFrame, {
start:function() {
this.find("img").hover(
function() {
toWait = true;
},
function() {
toWait = false;
}).click(
function() {
location.href = jQuery(this).attr("alt");
});
this.startSlide();
return this;
},
startSlide:function() {
clearTimeout(this.waitTimer);
if (!toWait) {
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 4000);
}else{
this.waitSlide();
}
}
});

jQuery.fn.cakey2 = function(param) {
var slider = jQuery.extend(this, SlideFrameEvent);
return slider;
};
})();

$(document).ready(function(){
// 5秒おきに実行
$("#test").cakey2().start();
});

</script>
関連記事
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。