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 追記
あらためてみると、ソースがひどい。。。
近いうち(?)にもうちょっとマシにしたい。。。
スポンサーサイト

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

[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>

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

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

とりあえず、1枚ごとを落としていくようにアニメーションはできました。

そこで、連続して落としていけるかと思い
やってみると、

■ ← 一枚目の画像
□ ← 空白の時間
■ ← 次の画像

となってしまう。

そりゃそうだな。
一枚目と次の画像をjQeury.animationをチェーンして行っているから
前のアニメーションが終了後、次のアニメーションが開始されるわけで。。。
これを連続にしようと思って、とりあえずfor文にしてみたら。。。

■ ← 一枚目&次の画像

以上!

ダメじゃーん。
って、見事に描画の罠にかかった。。。orz

どういうことかというと
一つの関数内でfor文を使ってスタイルで位置を変更して
for文を抜けたら移動完了としてしまったものだから
関数が終わった時が描画の時(正確には違いますが。。)なので
描画のときには、すでに移動が完了してしまっててアニメーションは一切無し。

ハァ。。。
ということで、jQuery.animationで連続をしようと思ったら
連続するものを一つのタグで囲ってしまって
親タグを移動させて連続しているように見せるとかのコツが必要なのかなぁと。

ってことで、とりあえず、今のところはココで止まってる。
-----------------------------------------------------------------------------
考えてみたら、終わってから次じゃなくて
両方を同時にアニメーションさせればいいだけだった。

ということで、こうなった。

<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:150px;
height:110px;
}
#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/frame.png');*/
width:150px;
height:110px;
opacity:1;
}
#framebox img {
position:absolute;
max-height:100px;
max-width:100px;
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()+20;
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;
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>

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

[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>

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

[fc2][jQuery][プラグイン]jQueryを使ってプラグイン(2-2)2011-03-11(Fri)

jQueryのことは、さっき書いたので
fc2のプラグインのことを。

プラグイン作ってて
プレビューで確認することができるんだけど
これが問題。

なにが問題って
javascript使って作ってると
htmlのidで判断して、何かをやろうとすると
プレビュー内では、どうも2つ(今、設定中のものとプレビュー中のもの)
同じものが表示されるみたいで
setIntervalやsetTimeoutを使ってると
プレビュー内で同じidのエレメントに対してjavascriptが働いて
おかしな動きになってしまうんです。

なので、確認は全て一旦設定して
直接、自分のブログを確認するしかないということでした。。。

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

工事中
RSSフィード
リンク

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