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

けろ&ひな

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

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

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

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

[fc2][jQuery][プラグイン]jQueryを使ってプラグイン(5)2011-06-06(Mon)

連続。

とりあえず、できたかなと。

デザインはすごく適当。
バックとか、もっとこだわったら面白くなりそうだけど
一旦、記録。

感想としては

jQuery使うと楽。
でも、それにこだわると面倒。
animateは続けて投げてやると、複数のアニメーションが同時進行になる。
(フレームごとにメソッド実行とかもできるみたい)
あと、ActionScript2でもそうだけど
thisが行方不明になりそうになるので注意。
(その辺はスクリプト言語の宿命か?)

それから、プロトタイプ、継承の動きについては
javaとかに慣れた人には、というか自分には
受け入れるのに時間がかかった。
(未だに混乱することもあり)

ということで、ソースはこんな感じになりました。

[最近アップしたイメージを連続して5秒おきに切り替えて表示します。]
<style>
#test {
position:relative;
border:solid 1px #999999;
/* background-image:url('http://blog-imgs-17.fc2.com/c/a/k/cakey2/frame.png'); */
overflow:hidden;
width:200px;
height:105px;
}
#test a {
border:0;
padding:0;
margin: 0;
}
#test .active {
z-index:10;
opacity:1.0;
}
#test .past {
z-index:5;
opacity:0;
}
#framebox {
position:absolute;
z-index:11;
background-image:url('http://blog-imgs-17.fc2.com/c/a/k/cakey2/frameGray1.png');
width:200px;
height:110px;
opacity:1;
margin: 0 0px;
}
#framebox img {
position:absolute;
max-height:100px; /* (上下のマージンを5としています) */
max-width:160px; /* (両サイドのマージンを10としています) */
top:0;
left:0;
!cursor:hand;
cursor:pointer;
}
</style>
<div id="test">
<!--image-->
<div name="framebox" id="framebox" class="past">
<img name="picture" src="<%image_url>" alt="blog-date-<%image_year><%image_month><%image_day>.html">
</div>
<!--/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,
isAnimation:false,
isPast:false,
isActivate:false,
sl:"",
firstItem: function() {
return jQuery(this.children("[name='"+this.sl+"']").get(0));
},
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.nextAll("[name='"+this.sl+"']:first"):null;
$next = (isNotEmpty($next))?$next:this.firstItem();
return $next;
},
startSlide:function() {
clearTimeout(this.waitTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 5000);
},
waitSlide:function() {
clearTimeout(this.activeTimer);
this.waitTimer = setTimeout(jQuery.proxy(this, "startSlide"), 100);
},
movePast:function() {
// 現在表示中のITEMを消す
var $active = this.activeItem();
var dis = this.height();
var speed = 500;
clearTimeout(this.activeTimer);
this.isPast = true;
if ($active) {
$active.animate({"top":dis, opacity:1.0}, speed, jQuery.proxy(this, "compPast"));
this.moveActive();
}else{
this.isPast = false;
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};
this.isActivate = 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":1})
.animate({"top":pos.top, opacity:1.0}, speed, jQuery.proxy(this, "compActive"));
},
compPast:function() {
this.isPast = false;
this.activateItem();
},
compActive:function() {
this.isActivate = false;
this.activateItem();
},
activateItem:function() {
if (this.isPast || this.isActivate) {
return;
}
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(
jQuery.proxy(this, "hoverHandler"),
jQuery.proxy(this, "blurHandler")).click(
function() {
location.href = jQuery(this).attr("alt");
});
this.startSlide();
return this;
},
startSlide:function() {
clearTimeout(this.waitTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 5000);
},
hoverHandler:function() {
if (!this.isPast && !this.isActivate) {
clearTimeout(this.activeTimer);
}
},
blurHandler:function() {
if (!this.isActive && !this.isPast) {
clearTimeout(this.waitTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 100);
}
}
});

jQuery.fn.cakey2 = function(param) {
jQuery("img").each(function(){
var $img = jQuery(this);
var $framebox = jQuery("#framebox");
var h = ($framebox.height() - $img.height())/2;
var w = ($framebox.width() - $img.width())/2 + 10;
jQuery(this).css("margin-top", h).css("margin-left", w);
return jQuery(this);
});
var slider = jQuery.extend(this, SlideFrameEvent, {sl:param});
return slider;
};
})();

$(document).ready(function(){
// 5秒おきに実行
$("#test").cakey2("framebox").start();
});
</script>
関連記事

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

コメントの投稿

管理者にだけ表示を許可する

コメント

工事中
RSSフィード
リンク

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