使用Javascript和HTML避免光标的图像？
因此，每当鼠标靠近它时，我都试图使图像远离鼠标。我在这里找到了一个代码：但是我很难让它工作。我认为我在我的网页中实现它是错误的，因为这是我第一次使用html、css和javascript。有人能让我知道我做错了什么，我将如何着手修复它（如果有的话）使用Javascript和HTML避免光标的图像？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，每当鼠标靠近它时，我都试图使图像远离鼠标。我在这里找到了一个代码：但是我很难让它工作。我认为我在我的网页中实现它是错误的，因为这是我第一次使用html、css和javascript。有人能让我知道我做错了什么，我将如何着手修复它（如果有的话） 我的网站 th，td{ 填充：15px； 表布局：固定； 宽度：180px； z指数：100； 填充：0px； } 运输署{ 文本对齐：居中； 字体系列：“时代新罗马”，Helvetica，无衬线； 字体大小：15磅； 边界半径：5px } .中心
我的网站
th，td{
填充：15px；
表布局：固定；
宽度：180px；
z指数：100；
填充：0px；
}
运输署{
文本对齐：居中；
字体系列：“时代新罗马”，Helvetica，无衬线；
字体大小：15磅；
边界半径：5px
}
.中心{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.右下角{
位置：固定；
底部-2%；
右：0.5%
}
a{
颜色：#00003D；
文本装饰：无
}
a:悬停{
颜色：橙色；
字体大小：105%；
}
门顶{
宽度：100%；
身高：50%；
位置：固定；
排名：0；
左：0；
z指数：100000；
-webkit动画：向前移动5s；
动画：向前移动5s；
-webkit动画延迟：2s；
动画延迟：2s；
}
@关键帧向上移动{
从{top:0%；}
到{top:-100%；}
}
@-webkit关键帧向上移动{
从{top:0%；}
到{top:-100%；}
}
门底{
宽度：100%；
身高：50%；
位置：固定；
底部：0；
左：0；
z指数：100000；
-webkit动画：向下移动5s向前；
动画：向下移动5s向前；
-webkit动画延迟：2s；
动画延迟：2s；
}
@关键帧向下移动{
从{底部：0%；}
至{底部：-100%；}
}
@-webkit关键帧向下移动{
从{底部：0%；}
至{底部：-100%；}
}
.圆圈{
背景色：rgba（0,0,0,0）；
边框：5px实心rgba（0183229,0.9）；
不透明度：.9；
右边框：5px实心；
左边框：5px实心；
边界半径：50px；
盒影：035px#2187e7；
宽度：30px；
高度：30px；
保证金：0自动；
动画：自旋脉冲1s无限线性；
-webkit动画：自旋脉冲1s无限线性；
}
.圆圈1{
背景色：rgba（0,0,0,0）；
边框：5px实心rgba（0183229,0.9）；
不透明度：.9；
左边框：5px实心；
右边框：5px实心；
边界半径：50px；
盒影：0 0 15px#2187e7；
宽度：10px；
高度：10px；
保证金：0自动；
位置：相对位置；
顶部：-30px；
动画：自旋脉冲1s无限线性；
-webkit动画：自旋脉冲1s无限线性；
}
@关键帧自旋脉冲{
0% {
变换：旋转（160度）；
不透明度：0；
盒影：0 0 1px#2187e7；
}
50% {
变换：旋转（145度）；
不透明度：1；
}
100% {
变换：旋转（-320度）；
不透明度：0；
}
}
@关键帧自旋脉冲{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
@-webkit关键帧自旋脉冲{
0% {
-webkit变换：旋转（160度）；
不透明度：0；
盒影：0 0 1px#2187e7；
}
50% {
-webkit变换：旋转（145度）；
不透明度：1；
}
100% {
-webkit变换：旋转（-320度）；
不透明度：0；
}
}
@-webkit关键帧spinoffPulse{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
转{
过渡：宽度2s，高度2s，变换2s；
}
旋转：悬停{
宽度：400px；
高度：400px；
转换：翻译（-50%，-50%）；
}
正文{位置：相对；}
#img{位置：相对；}
jQuery（函数（$）{
$（'#img'）.mouseover（函数（）{
var dWidth=$（document）.width（）-100，//100=图像宽度
dHeight=$（document）.height（）-100，//100=图像高度
nextX=Math.floor（Math.random（）*dWidth），
nextY=Math.floor（Math.random（）*dHeight）；
$（this.animate（{left:nextX+'px'，top:nextY+'px'}）；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Websites</title>
<style type="text/css">
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
z-index:100;
padding: 0px;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
}
.center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomright{
position: fixed;
bottom:-2%;
right:0.5%
}
a {
color:#00003D;
text-decoration:none
}
a:hover {
color: orange;
font-size: 105%;
}
img.DoorTop{
width: 100%;
height: 50%;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
-webkit-animation: moveUp 5s forwards;
animation: moveUp 5s forwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@keyframes moveUp {
from {top:0%;}
to {top:-100%;}
}
@-webkit-keyframes moveUp {
from {top:0%;}
to {top:-100%;}
}
img.DoorBottom{
width: 100%;
height: 50%;
position: fixed;
bottom: 0;
left: 0;
z-index: 100000;
-webkit-animation: moveDown 5s forwards;
animation: moveDown 5s forwards;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@keyframes moveDown {
from {bottom:0%;}
to {bottom:-100%;}
}
@-webkit-keyframes moveDown {
from {bottom:0%;}
to {bottom:-100%;}
}
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid;
border-left: 5px solid ;
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
animation: spinPulse 1s infinite linear;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid;
border-right: 5px solid;
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 10px;
height: 10px;
margin: 0 auto;
position: relative;
top: -30px;
animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
@keyframes spinPulse {
0% {
transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
transform: rotate(145deg);
opacity: 1;
}
100% {
transform: rotate(-320deg);
opacity: 0;
}
}
@keyframes spinoffPulse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
img.growturn {
transition: width 2s, height 2s, transform 2s;
}
img.growturn:hover {
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
}
body { position: relative; }
#img { position: relative; }
</style>
</head>
<body id="body" style="background:url(webdata/images/index/background.png) no-repeat; background-attachment: fixed; background-size:100% 100%;">
<img src="webdata/images/index/emblem.png" width="50" height="50" alt="Grey Square" id="img" style="z-index:900"/>
<script>jQuery(function($) {
$('#img').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
<div>
<img class="DoorTop" src="webdata/images/index/topDoor.png" alt="topDoor">
<img class="DoorBottom" src="webdata/images/index/bottomDoor.png" alt="bottomDoor">
</div>
<div class="center">
<table class="button">
<tr>
<td colspan="4">
<img class="growturn" src="webdata/images/index/emblem.png" alt="" height="40" width="40" style="position:absolute; left:28%; top:6%">
<p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 15pt; color: white;">PROJECT <strong>COSC</strong>2206</p>
</td>
</tr>
<tr>
<td colspan="4" style="font-family:Geneva, 'Book Antiqua', Palatino, serif; font-size: 40pt; color: orange">WELCOME TO My WYBSITE</td>
</tr>
<tr>
<td colspan="4" style="font-family:Helvetica, sans-serif; font-size: 9pt; color:#C2F0FF; letter-spacing: 1px; padding: 20px">Welcome to Project COSC2206. All assignments can be viewed below once they become available or simply return to the iTool's.</td>
</tr>
<tr>
<td style="background-color:#00CCFF;"><a href="#">Itool</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 2</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 3</a></td>
<td style="background-color:#00CCFF;"><a href="classified.html">Assignment 4</a></td>
</tr>
</table>
</div>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcoscvm23.cs.laurentian.ca%2F;outline=1" target="_blank">
<img src="webdata/images/index/HTML5_Badge.png" alt="" width="28" height="27" style="position: fixed; float: left; left: 7px; bottom: 5px;">
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
<img src="webdata/images/index/CSS3.png" alt="" width="31" height="31" style="position: fixed; float: left; left: 35px; bottom: 2px;">
</a>
<div class="bottomright">
<div class="circle"></div>
<div class="circle1"></div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>