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;
}

如果没有帮助，请按F12and F5，然后查看控制台中是否有任何错误。

此外，您不应该在</head>和之间放置标签<body>。

于 2013-08-06T00:52:10.060 回答