UNIQLOの下にあるマウスオーバーで左から赤いキャプが出てくるやり方を見つけて実践して作れたのですが、ECサイトに設置するのにbody内にjavascriptを書かないといけないのです。ローカルテストでhead内記述は動作しますがbody内記述は動きません。何が原因でしょうか？
質問の続き：ソースです。head外だと動きますがbody内に<!--▼▼small-bnr▼▼-->から記述すると動かないのです。どなたか、お分かりできる方いますか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="gaibu-file.css" rel="stylesheet" type="text/css" /> <head> </head> <!--▼▼small-bnr▼▼--> <script type="text/javascript" src="xxxxxxx/jquery-1.7.1.js"></script> <script type="text/javascript" src="xxxxxxxx/jquery-easing.js"></script> <script type="text/javascript"> $(document).ready(function(){ //--------------------------------- var $target=$("img.move"); var idx=0; $target.css({"left":-840}); var w=$("div.imageBox").width(); // $("div.imageBox").hover( function(){ idx=$(this).index(); $target.eq(idx).css({"left":-840}); $target.eq(idx).stop().animate({"left":-w+"px"},400,"easeInOutExpo"); }, function(){ $target.eq(idx).stop().animate({"left":w+"px"},400,"easeInOutExpo"); } ); }); </script> <body> <div class="imageBox"> <img src="http://xxxxxx/img/small-bnr.jpg" width="280" height="200" /> <img class="move" src="xxxxxxxxxx/img/small-bnr_on.png" width="840" height="200" /></div> </body> </html> ================================= gaibu-file.css @charset "utf-8"; div.imageBox{ width:280px; height:200px; overflow:hidden; float:left; display:inline; position: relative; } img.move{ top:0; left:0; position: absolute; }
head内に描いたらダメなの？
bodyの中に書いてありませんが。。
ECサイトはどこなんですか?
ECサイトはカラーミーというところです。body内に書くと動かないのです。上のソースは動くソースです。bodyタグを<!--▼▼small-bnr▼▼-->の上に書くと動きません。カラーミーはheadがいじれない仕様になってます。
カラーミーだったら入れれないから、インラインフレームにして表示したら？
エフェクトを適用したい要素の後（フッター箇所）に$(document).readyを除いたソースを設定してみてはいかがでしょう？
scriptタグ自体が、bodyタグの中にも、headタグの中にも書かれてないよ。記述位置が正しくない。だからjqueryが読まれてないんじゃないの？
インラインフレーム案と$(document).readyを除いたソースの設定を試してみようかと思います。記述位置が正しくないと言われましたが承知の上です。headにはjavascriptがかけない仕様なので、そしてbody内でも動きません。上のソースは唯一動くソースの例です。
なんでそんなにえらそうな態度なの？上から目線で質問するな。
質問者です。ちなみに他のjQueryはbody内に書いてもちゃんと動きます。jquery-easing.jsだけが反応してくれないのです。。。
カラーミーの仕様じゃないんですかね?
気にしなさんな。
すみません。。。ありがとうございます。
質問者です。教えていただいた案で無事に設置することができました。本当にありがとうございました！
ちなみにどの案でしょうか？参考までに教えてください。
エフェクトを適用したい要素の後（フッター箇所）に$(document).readyを除いたソースを設定してみてはいかがでしょう？という案です。ちなみにbody内にjsを書きました。headにはかけないECサイトなもので。。。
みんなの回答 14 件
質問の続き：ソースです。head外だと動きますがbody内に<!--▼▼small-bnr▼▼-->から記述すると動かないのです。どなたか、お分かりできる方いますか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="gaibu-file.css" rel="stylesheet" type="text/css" />
<head>
</head>
<!--▼▼small-bnr▼▼-->
<script type="text/javascript" src="xxxxxxx/jquery-1.7.1.js"></script>
<script type="text/javascript" src="xxxxxxxx/jquery-easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//---------------------------------
var $target=$("img.move");
var idx=0;
$target.css({"left":-840});
var w=$("div.imageBox").width();
//
$("div.imageBox").hover(
function(){
idx=$(this).index();
$target.eq(idx).css({"left":-840});
$target.eq(idx).stop().animate({"left":-w+"px"},400,"easeInOutExpo");
},
function(){
$target.eq(idx).stop().animate({"left":w+"px"},400,"easeInOutExpo");
}
);
});
</script>
<body>
<div class="imageBox">
<img src="http://xxxxxx/img/small-bnr.jpg" width="280" height="200" />
<img class="move" src="xxxxxxxxxx/img/small-bnr_on.png" width="840" height="200" /></div>
</body>
</html>
=================================
gaibu-file.css
@charset "utf-8";
div.imageBox{
width:280px;
height:200px;
overflow:hidden;
float:left;
display:inline;
position: relative;
}
img.move{
top:0;
left:0;
position: absolute;
}
head内に描いたらダメなの？
bodyの中に書いてありませんが。。
ECサイトはどこなんですか?
ECサイトはカラーミーというところです。body内に書くと動かないのです。上のソースは動くソースです。bodyタグを<!--▼▼small-bnr▼▼-->の上に書くと動きません。カラーミーはheadがいじれない仕様になってます。
カラーミーだったら入れれないから、インラインフレームにして表示したら？
エフェクトを適用したい要素の後（フッター箇所）に$(document).readyを除いたソースを設定してみてはいかがでしょう？
scriptタグ自体が、bodyタグの中にも、headタグの中にも書かれてないよ。記述位置が正しくない。だからjqueryが読まれてないんじゃないの？
JavaScriptの記入場所－JavaScript入門
http://www.pori2.net/js/kihon/2.htmlインラインフレーム案と$(document).readyを除いたソースの設定を試してみようかと思います。記述位置が正しくないと言われましたが承知の上です。headにはjavascriptがかけない仕様なので、そしてbody内でも動きません。上のソースは唯一動くソースの例です。
質問者です。ちなみに他のjQueryはbody内に書いてもちゃんと動きます。jquery-easing.jsだけが反応してくれないのです。。。
カラーミーの仕様じゃないんですかね?
質問者です。教えていただいた案で無事に設置することができました。本当にありがとうございました！
エフェクトを適用したい要素の後（フッター箇所）に$(document).readyを除いたソースを設定してみてはいかがでしょう？という案です。ちなみにbody内にjsを書きました。headにはかけないECサイトなもので。。。
関連するトピックス