=。=
是要做个网页。。。
但用到了JS。。但完全没弄过。。
结果没成功。。我觉得我可能是js写进html里犯了什么错误。。。
放上代码。。求指导。。
html
<!DOCTYPE html>
<html>
<head>
<title>Page 3</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
$(function(){
var pageX;
var pageY;
$('body').mousemove(function(event){
pageX = event.pageX - 150 ;
pageY = event.pageY- 150;
$('#lamp').css('left',pageX);
$('#lamp').css('top',pageY);
});
});
</script>
</head>
<body>
<div id="lamp">
</div>
</body>
</html>
还有CSS
body
{
padding:0px;
margin:0px;
cursor:none;
background-color:#d7d4d4;
}
#mask
{
width:100vw;
height:100vh;
}
#lamp
{
position:fixed;
top:0px;
left:0px;
width:300px;
height:300px;
border-radius:150px;
border-style:solid;
border-color:white;
background:inherit;
box-shadow:1px 1px 12px white;
background-image:url('
');
background-size: cover;
background-position:0% 0%;
background-attachment : fixed;
}
是要做个网页。。。
但用到了JS。。但完全没弄过。。
结果没成功。。我觉得我可能是js写进html里犯了什么错误。。。
放上代码。。求指导。。
html
<!DOCTYPE html>
<html>
<head>
<title>Page 3</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
$(function(){
var pageX;
var pageY;
$('body').mousemove(function(event){
pageX = event.pageX - 150 ;
pageY = event.pageY- 150;
$('#lamp').css('left',pageX);
$('#lamp').css('top',pageY);
});
});
</script>
</head>
<body>
<div id="lamp">
</div>
</body>
</html>
还有CSS
body
{
padding:0px;
margin:0px;
cursor:none;
background-color:#d7d4d4;
}
#mask
{
width:100vw;
height:100vh;
}
#lamp
{
position:fixed;
top:0px;
left:0px;
width:300px;
height:300px;
border-radius:150px;
border-style:solid;
border-color:white;
background:inherit;
box-shadow:1px 1px 12px white;
background-image:url('
');
background-size: cover;
background-position:0% 0%;
background-attachment : fixed;
}
