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

けろ&ひな

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

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

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

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

[fc2][jQuery][プラグイン]jQueryを使ってプラグイン(おまけ)2011-06-07(Tue)

もうちょっとだけ、デザインをマシにして
スクリプト部分を必要な分だけにして
他はjsファイルにまとめた。

機能は、単純に写真のスライド。
上から下へスライドして、マウスを乗せたらストップ。
クリックで記事へ遷移。
fc2のimageタグを使っているので、最近の何枚かを繰り返すと思います。
確認したブラウザはfirefox、chrome、ie8のみです。

使ってみたい方は、以下のソースをどうぞ。
できれば、コメントとかもお願いします。
(大きさは、縦:横=110px:200pxになっています。)
(画像は勝手に縮小されますので、サムネイルはたぶん必要ありません。)

表示されない、または画像が1枚で繰り返される等の時は
「環境設定の変更」→「ブログの設定」→(下のほう)「拡張表示設定:最新アップロード画像」
を変更してみてください。

<style>
/* 背景画像は縦:横=110px:200pxになっています。 変更する際には、大きさに気を付けてください。*//
div#pluginCakey2 {
position:relative;
border:solid 1px #999999;
/* 背景画像 */
background-image:url('http://blog-imgs-17.fc2.com/c/a/k/cakey2/frameLeaf1.png');
overflow:hidden;
width:180px;
height:110px;
}
div#pluginCakey2 a {
border:0;
padding:0;
margin: 0;
}
div#pluginCakey2 .active {
z-index:10;
!filter: alpha( opacity=100 );
-ms-filter: alpha( opacity=100 );
opacity:1.0;
}
div#pluginCakey2 .past {
z-index:5;
!filter: alpha( opacity=0 );
-ms-filter: alpha( opacity=0 );
opacity:0;
}
#cakey2div1 {
position:absolute;
z-index:11;
width:180px;
height:115px;
!filter: alpha( opacity=100 );
-ms-filter: alpha( opacity=100 );
opacity:1;
margin: 0 0px;
}
div#cakey2div1 .slideimage{
position:absolute;
max-height:100px; /* (上下のマージンを5としています) */
max-width:140px; /* (両サイドのマージンを10としています) */
top:0;
left:0;
!cursor:hand;
cursor:pointer;
z-index:6;
}
/* 画像に微妙な白いマスクがかかっています。 嫌な時は、ここのbackground-imageを消してください。*/
div#cakey2div2 {
position:absolute;
z-index:4;
width:200px;
height:110px;
!filter: alpha( opacity=20 );
-ms-filter: alpha( opacity=20 );
opacity:0.2;
margin: 0 0px;
background-image:url('http://blog-imgs-17.fc2.com/c/a/k/cakey2/frameLeaf2.png'); /* ここを消す */
}
</style>
<div id="pluginCakey2">
<!--image-->
<div name="cakey2div1" id="cakey2div1" class="past">
<div id="cakey2div2"></div>
<img name="picture" class="slideimage" 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" src="http://blog-imgs-17.fc2.com/c/a/k/cakey2/cakey2.js"></script>
<script>
$(document).ready(function(){
// 5秒おきに実行
$("#pluginCakey2").cakey2(5000).start();
});
</script>


以下は、jsファイルの中身です。
プラグインとして貼り付けるだけなら、必要ないと思います。
(function(){
var isNotEmpty = function(o) {
return (o && o.length>0);
},
toWait = false,
SlideFrame = {
waitTime:5000,
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"), this.waitTime);
},
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"), this.waitTime);
},
hoverHandler:function() {
if (!this.isPast && !this.isActivate) {
clearTimeout(this.waitTimer);
clearTimeout(this.activeTimer);
}
},
blurHandler:function() {
if (!this.isActive && !this.isPast) {
clearTimeout(this.waitTimer);
clearTimeout(this.activeTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 100);
}
}
});

jQuery.fn.cakey2 = function(param) {
jQuery(this).find("img").each(function(){
var $img = jQuery(this);
var $framebox = jQuery("#cakey2div1");
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:"cakey2div1", waitTime:param});
return slider;
};
})();


2011/06/15 追記
あらためてみると、ソースがひどい。。。
近いうち(?)にもうちょっとマシにしたい。。。
関連記事

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

コメントの投稿

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

コメント

工事中
RSSフィード
リンク

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