Question

这些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>

Answer 1

我在浏览器中尝试了代码，我可以告诉脚本运行了。尝试在你的CSS中添加它，看看它是否更好：

.area {
  z-index: -1;
}

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

此外，您不应在</head>和<body>之间添加标记。

将两个代码集成在一起时，Javascript函数不起作用

1 个答案: