在鼠标点击特效上加上鼠标移动特效（一）
---------------------2021.3.31更新-----------------------------
补一个代码少一点的demo
js代码打包下载 下载 js.7z
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.stage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none
}
</style>
</head>
<body style="background:rgb(4, 105, 136);">
<!-- 下面是你的主页面 -->
<div style="text-align: center;">哈哈哈哈</div>
<!-- 上面是你的主页面 -->
<!-- s鼠标移动特效 -->
<canvas id="stage1" class="stage"></canvas>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<!-- s鼠标移动特效 -->
</body>
</html>
文件结构如下
> js
index.html
---------------------2021.3.31更新-----------------------------
[video(video-oj5Dlwfb-1616208128726)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=629684788)(image-https://ss.csdn.net/p?http://i0.hdslb.com/bfs/archive/a8c568af2bd68d1a6888f6156eaa7e12fb5b4518.jpg)(title-网站鼠标点击特效和鼠标移动特效)]
图片打包下载 下载 image.7z
js代码打包下载 下载 js.7z
<!DOCTYPE html>
<html>
<head>
<title>至渝的个人简历</title>
</head>
<link href="logo.ico" rel="shortcut icon" />
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 用来实现鼠标点击特效-->
<style>
* {
margin: 0;
padding: 0;
}
body {
color: rgb(236, 228, 228);
}
.bg {
background: url(image/img.png) no-repeat fixed;
background-size: 100% 100%;
}
.container {
height: 100%;
width: 1120px;
margin: 0 auto;
display: block;
}
table {
height: 100%;
width: 100%;
}
table,
td {
border-collapse: collapse;
text-align: left;
}
td {
height: 20px;
}
.mail a {
text-decoration: none;
color: rgb(243, 242, 242);
}
.jianju a {
text-decoration: none;
color: rgb(243, 242, 242);
}
h2 {
height: 43px;
line-height: 43px;
}
.mail a:hover {
text-decoration: underline;
color: rgb(41, 6, 240);
}
.liming {
/* height: 150px; */
width: 150px;
}
.tophead {
height: 48px;
text-indent: 3.5em;
margin-left: 30px;
line-height: 48px;
}
.peplo {
background: url(image/peplo.png) no-repeat;
}
.phone {
background: url(image/phone.png) no-repeat;
}
.adress {
background: url(image/address.png) no-repeat;
}
.mail {
background: url(image/mail.png) no-repeat;
}
.wechat {
background: url(image/wechat.png) no-repeat;
}
.profession {
background: url(image/profesion.png) no-repeat;
}
.university {
background: url(image/university.png) no-repeat;
}
.qiuzhi {
background: url(image/qiuzhi.png) no-repeat;
}
.bgimage {
background-size: auto 80%;
}
.w_foot {
height: 40px;
margin-top: 50px;
}
.w_foot_copyright {
height: 40px;
text-align: center;
padding-top: 10px;
background: #414141;
color: #b2bcc5;
font-size: 13px;
}
.stage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none
}
</style>
<body>
<!-- 实现鼠标移动特效 -->
<canvas id="stage1" class="stage"></canvas>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<!-- 实现鼠标移动特效 -->
<div class='bg'>
<div style="height: 70px;">
<p></p>
</div>
<div class="container">
<table>
<tr>
<td>
<p class='tophead peplo bgimage'>姓名：xxx</p>
</td>
<td>
<p class='tophead phone bgimage'>电话：xxxx</p>
</td>
<td rowspan="4" class="liming">
<img src="image/limin.png" alt="" class="liming">
</td>
</tr>
<tr>
<td>
<p class='tophead bgimage university'>毕业学校：中南大学</p>
</td>
<td>
<p class='tophead bgimage mail'>邮箱：<a href="mailto:wuyinzhiming@163.com">xxxxx@163.com</a></p>
</td>
</tr>
<tr>
<td>
<p class='tophead bgimage profession'>学历/专业：硕士/控制科学与工程</p>
</td>
<td>
<p class='tophead bgimage wechat'>微信：xxxxx</p>
</td>
</tr>
<tr>
<td>
<p class='tophead qiuzhi bgimage'>求职意向：软件开发工程师</p>
</td>
<td>
<p class='tophead bgimage adress'>贯籍：xxxxxx</p>
</td>
</tr>
</table>
</div>
<div style="height: 380px;">
<p> </p>
</div>
<div class="w_foot">
<div class="w_foot_copyright">
Copyright © 2021-2023, 至渝, All Rights Reserved.
</div>
</div>
</div>
<script>
/* 鼠标点击文字特效 */
var font = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var color = new Array('#ff0000', '#eb4310', '#f6941d', '#fbb417', '#ffff00', '#cdd541', '#99cc33', '#3f9337', '#219167', '#239676', '#24998d', '#1f9baa', '#0080ff', '#3366cc', '#333399', '#003366', '#800080', '#a1488e', '#c71585', '#bd2158', '#eec142', '#FEEE6D');
var f_idx = Math.floor(Math.random() * 20) % font.length;
var f_idx1 = Math.floor(Math.random() * 20) % font.length;
var c_idx = Math.floor(Math.random() * 40) % font.length;
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var $i = $("<span />").text(font[f_idx] + ' ' + font[f_idx1]);
f_idx = Math.floor(Math.random() * 20) % font.length;
f_idx1 = Math.floor(Math.random() * 20) % font.length;
c_idx = Math.floor(Math.random() * 40) % color.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 9999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": color[c_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function () {
$i.remove();
});
});
});
</script>
</body>
</html>
使用方法
- 复制代码，放到一个新建的 .html 文件中
- 下载图片包和js代码包，解压到 .html文件所在目录下（直接解压即可，不用改名字），结构如下
> image
> js
index.html
- 浏览器运行 .html 文件，鼠标点击即可看到效果
