0

これらのJavaScript関数は完全に別々に機能していますが、同じページに書き込もうとすると非アクティブになります。ID とクラス名はすべて正しいです。私はしばらくそれをいじっています

パート1：

<script>
$("#pic1").click(function(){
var div=$("#pic1");
div.animate({top:'-100px',opacity:'0.4'},"slow");
div.animate({height:'100%',opacity:'1'},"slow");
});

</script>

パート2：

 <script>

var mouseX = 0;
var mouseY = 0;

var offsetWidth  = $('.area').width()/2;
var offsetHeight = $('.area').height()/2;

var origBoxTop  = parseInt($('.box').css('top'));
var origBoxLeft = parseInt($('.box').css('left'));


$('.area').mousemove( function(e) {

mouseX = offsetWidth  - e.pageX; 
mouseY = offsetHeight - e.pageY;


$('.box').css('top',  origBoxTop + mouseY);
$('.box').css('left', origBoxLeft + mouseX);


$('.info').attr('value', 'x: ' + mouseX + ', y: ' + mouseY);
});
</script> `

これらの部分は両方とも単独で機能するため、html と css は正しいと確信しています。両方を同じページでアクティブにしたいだけです。

それらをすべてまとめることで、スクリプトタグ内にそれらを積み重ねてみましたが、何がわからないのかわからないので、おそらく非常に単純です。私はjavascriptとjQueryが初めてです。コード全体を下に投稿しました。

<!DOCTYPE html>
<html>
<head></head> 

<script src="jquery2.js"></script> 

<style>
body {
    background: url("back1.gif"); 
}

#tree {
    position: absolute; 
    top: 100px; 
    left: -20px; 
}

#tree2 {
    position: absolute; 
    top: -10px; 
    right: -90px; 
}

.box2 {
    position: absolute;
    height: 200px; 
    width: 200px; 
    }

#hi {
    cursor: pointer; 
top: 600px; 
left: 1075px; 
position: absolute; 
clear: all; 
}

#re {
    position: absolute;  
top: 500px; 
    left: 500px; 
    cursor: pointer; 
    clear all; 
}

#st {
    position: absolute; 
    top: 500px; 
    left: 300px; 
    cursor: pointer; 
    clear: all;
}

    .info {
    position: absolute;
    z-index: 99;
}
    .box {
    position: absolute;
    top: 100%;
    left: 100%;
    margin-top: -50px;
    margin-left: -50px;

}
    .box:hover {
    cursor: pointer;
}
.area {
    position: absolute;
    width: 100%;
    height: 100%;  
}


</style>

<body>

<script> 
$(document).ready(function(){

$("#re").click(function(){
    var div=$("#re");
    div.animate({top:'-100px',opacity:'0.4'},"slow");
    div.animate({height:'100%',opacity:'1'},"slow");
});

$("#st").click(function(){
    var div=$("#st");
    div.animate({right:'-100',opacity:'0.4'},"slow");
    div.animate({width:'100%',opacity:'1'},"slow");
 }); 

$("#hi").click(function(){
    var div=$("#hi");
    div.animate({left:'-400px',opacity:'0.4'},"slow");
    div.animate({width:'100%',opacity:'1'},"slow");
}); 

var mouseX = 0;
var mouseY = 0;

var offsetWidth  = $('.area').width()/2;
var offsetHeight = $('.area').height()/2;

var origBoxTop  = parseInt($('.box').css('top'));
var origBoxLeft = parseInt($('.box').css('left'));


$('.area').mousemove( function(e) {

mouseX = offsetWidth  - e.pageX; 
mouseY = offsetHeight - e.pageY;


$('.box').css('top',  origBoxTop + mouseY);
$('.box').css('left', origBoxLeft + mouseX);


$('.info').attr('value', 'x: ' + mouseX + ', y: ' + mouseY);
});


});
</script> 

<div id="wrapper">

<img src="tree.gif" id="tree">
<img src="tree2.gif" id="tree2"> 

<img src="1.gif" class="box2" id="st">
<img src="3.gif" class="box2" id="hi"> 
<img src="2.gif" class="box2" id="re"> 

</div> 

<section class="area"> 
    <div class="box" id="what"><a href="home.html"><img src="what.png"></a></div>    
</section>

</div> 

</body> 

</html>
4

1 に答える 1

0

ブラウザでコードを試してみたところ、スクリプトが実行されたことがわかりました。これを CSS に追加してみて、うまくいくかどうかを確認してください。

.area {
  z-index: -1;
}

問題が解決しない場合は、 と を押しF12てF5、コンソールにエラーがないかどうかを確認します。

</head>また、との間にタグを配置しないでください<body>。

于 2013-08-06T00:52:10.060 に答える