在鼠标点击特效上加上鼠标移动特效（一）

---------------------2021.3.31更新-----------------------------

补一个代码少一点的demo

js代码打包下载下载 js.7z

<!DOCTYPE htmlPUBLIC "-//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><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.stage {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none}</style>
</head><bodystyle="background:rgb(4, 105, 136);"><!-- 下面是你的主页面 --><divstyle="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更新-----------------------------

网站鼠标点击特效和鼠标移动特效

效果地址

图片打包下载下载 image.7z

js代码打包下载下载 js.7z

前一篇鼠标点击特效——富强、民主、文明、和谐…

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><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'><divstyle="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><divstyle="height: 380px;"><p> </p></div><div class="w_foot"><div class="w_foot_copyright">Copyright &copy; 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 文件，鼠标点击即可看到效果

在鼠标点击特效上加上鼠标移动特效（一）相关推荐

在鼠标点击特效上加上鼠标移动特效（二）
图片打包下载前一篇鼠标点击特效--富强.民主.文明.和谐- 效果 <!DOCTYPE html> <html><head><meta charset=&q ...
python读取鼠标点击坐标_python 读取鼠标点击坐标的实例
python如何抓取鼠标点击事件,并返回点击所在坐标...希望能利用python抓取点击屏幕时在终端中打印出1,小编自己尝试的代码如下问题补充:拜托了 event里有x.y,是相对坐标,x_root, ...
UE4 鼠标点击事件 || 虚幻4 鼠标点击事件
UE4 鼠标点击事件||虚幻4 鼠标点击事件一 .预备工作 1. 打开关卡蓝图 2.在关卡蓝图中进行下列操作二.静态网格物体的点击事件 1. 将静态网格物体拖拽到场景中,右击进行如图操作选 ...
python selenium鼠标点击_Python+Selenium学习--鼠标事件
场景前景讲解了鼠标的click()事件,而我们在实际的web产品测试中,有关鼠标的操作,不仅仅只有单击,有时候还包括右击,双击,拖动等操作,这些操作包含在ActionChains类中. Action ...
php鼠标点击事件,javascript模拟鼠标点击事件的实例代码
javascript触发模拟鼠标点击事件事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般 ...
Duilib 鼠标光标放在Combox上滚动鼠标时，Combox中的值会不断变化
实际开发过程中,发现只是将鼠标光标放在Combox上时,滚动鼠标,Combox内显示的值会随鼠标的滚动不断变化,很显然这是不我们想要的效果.查看Duilib中UICombo控件源码,发现鼠标滚轮响应事 ...
linux电脑鼠标点击没反应,linux – 鼠标点击无法在Ubuntu 16.04 LTS中运行
我刚在联想Thinkpad P50上安装了Ubuntu 16.04 LTS.很快我的鼠标点击停止工作.我仍然可以点击应用程序启动器,但没有其他地方.我是Linux新手,所以我不知道如何开始尝试解决这个 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
python pygame鼠标点击_pygame系列_mouse鼠标事件
pygame.mouse提供了一些方法获取鼠标设备当前的状态 '''pygame.mouse.get_pressed - get the state of the mouse buttons get ...

在鼠标点击特效上加上鼠标移动特效（一）

使用方法

在鼠标点击特效上加上鼠标移动特效（一）相关推荐

最新文章

热门文章