使用Javascript和HTML避开光标的图像
Image avoiding the cursor using Javascript and HTML?
所以我试图让图像在每次鼠标靠近它时远离鼠标。我在这里找到了一个代码：http：//jsfiddle.net/karalamalar/atNva/但我在使其工作时遇到了麻烦。我认为我在我的网页中实现了错误的，因为这是我第一次使用 html、css 和 javascript。有人可以让我知道我做错了什么以及我将如何修复它（如果有的话）。
<!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>
如果这是你的网页的全部代码，你需要包含jQuery。 我喜欢使用谷歌的，但你也可以自己托管它：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
编辑：您可以将代码放在头部的任何地方，您应该很高兴。
相关文章：
- 在Widget代码中使用javascript从左向右滑动光标图像
- 在Widget代码中没有jQuery的情况下，用光标图像从左滑动到右
- 图像阵列预加载时显示沙漏光标
- 使用JavaScript的带有背景图像的径向光标
- 如何使用JS捕捉带有垂直线的自定义图像光标
- Javascript用光标擦除图像
- 可以用我自己的自定义图像替换光标
- 使用Opera自定义base64图像光标-可能
- 如果光标在图像上在某种意义上不停止.它正在运行
- 使用Javascript和HTML避开光标的图像
- JavaScript 如何将鼠标光标更改为图像
- 如何将箭头光标图像更改为我的网页的手形图像
- 如何在 js 和 css3 中使用鼠标光标单击实现滚动图像
- 从 cs 页面更改图像按钮集的光标
- 使用javascript自定义光标图像
- 使用Javascript的随机光标图像
- 在没有画布的javascript中使用自定义光标图像动态更改光标大小
- 当我悬停在帖子链接上时，我可以使用帖子缩略图作为光标图像吗?(wordpress）
- 如何通过jQuery设置光标图像
- Javascript光标图像位置
