-

UNIQLOの下にあるマウスオーバーで左から赤いキャプが出てくるやり方を見つけて実践して作れたのですが、ECサイトに設置するのにbody内にjavascriptを書かないといけないのです。ローカルテストでhead内記述は動作しますがbody内記述は動きません。何が原因でしょうか?

みんなの回答 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サイトなもので。。。

最終更新日:2012-02-18 (5,288 views)

関連するトピックス

ページ上部に戻る