JavaScript实现的鼠标跟随特效示例【2则实例】
作者:huansky 发布时间:2024-04-17 09:50:27
标签:JavaScript,鼠标跟随
本文实例讲述了JavaScript实现的鼠标跟随特效。分享给大家供大家参考,具体如下:
鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。
1、跟随鼠标移动的彩色星星
如题,会根据鼠标的移动而移动,并在鼠标周围随机来回移动,让人感觉在放大缩小。根据书上的代码做了一些修改。比如,如果用户不移动鼠标,是不会显示星星效果的:其次就是将源代码中的亮度调节等去掉了,因为效果并不是很明显。截了三幅图,黑点近似代表鼠标的位置。效果图如下:
源代码:
<html>
<head>
<title>
Twinkle stars
</title>
<style>
.iestars{
position:absolute;
top:00px; left:00px;
height:50px;
width:50px;
padding-top:15px;
text-align:center;
display:none;
}
</style>
</head>
<body>
<script language = "JavaScript">
//数组保存星星的颜色,也可以设置为其它颜色,也可以增加或减少颜色数量
var colours=new Array('ff0000','00ff00','0000ff','ff00ff','00ffff','ffff00');
var amount=colours.length;
//初始化参数
var Ydelay=0,Xdelay=0; //圆环中心的位置
var step=0.2;
var currStep=0;
var my=0,mx=0; //记录鼠标当前位置
var flag=0;
//在容器中写入"."字符,闪烁的星星即是从"."变化而来的
for (i=0; i < amount; i++){
document.write('<div class = "iestars" >...</div>');
}
//处理鼠标事件
function iMouse(){
my = event.y;
mx = event.x;
//第一次初始化,只运行一次
if (flag==0){
delay();
flag=1;
}
}
document.onmousemove = iMouse;
var iestars=document.getElementsByClassName("iestars");
function stars(){
for(i = 0;i < amount;i++){
var style = iestars[i].style; //访问每个容器的style属性
style.color=colours[i];
style.display="block";
style.top = Ydelay+80*Math.sin(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //竖直位置
style.left = Xdelay+80*Math.cos(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //水平位置
}
currStep += step;
}
//计算圆环中心的位置,为当前圆环中心位置和鼠标位置的加权平均
function delay(){
Ydelay += (my-Ydelay)*1/20;
Xdelay += (mx-Xdelay)*1/20;
stars();
setTimeout('delay()',10);
}
</script>
</body>
</html>
2、水中鼠标特效
鼠标上方不断地冒出气泡,这些气泡在上升中不断摇晃,慢慢的变大,直到消失在窗口。
效果图:
源代码:
<html>
<head>
<meta charset="utf-8">
<title>
Water Bubbles
</title>
<style>
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid yellow;
width: 220px;
height: 42px;
padding: 10px;
z-index: 3;
}
img{
position:absolute;
top:0px;
left:0px;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<div id="low">
</div>
<div class="center">
eret
<a href="#" rel="external nofollow" >erte</a>
rt<p>rtdfffffffffff</p>
</div>
</body>
<script language="JavaScript">
var bubble={
imgsrc : "img/1.gif",
Amount : 15,
my : 10, //初始位置
mx : 10, //初始位置
Ypos : [], //y数组,记录图片的位置
Xpos : [], //x数组
Speed :[], //上升速度
size : [], //范围
sizegrow :[], //增长速度
angle :[], //余弦曲线的角度
anglegrow :[], //每次余弦曲线角度变化
img:"",
}
//鼠标事件
document.onmousemove=MouseMove;
function MouseMove(){
bubble.my = event.y-20;
bubble.mx = event.x;
}
//初始化数据
for (i = 0; i < bubble.Amount; i++){
bubble.Ypos[i] = bubble.my-20;
bubble.Xpos[i] = bubble.mx;
bubble.Speed[i] = Math.random()*1+3; //速度在[1,4)
bubble.angle[i] = 0;
bubble.anglegrow[i] = Math.random()*0.5+0.1; //角度变换[0.2,0.6)
bubble.size[i] = 8;
bubble.sizegrow[i] = Math.random()*1+2; //尺寸变换[0.5,0.6)
}
for (i = 0; i < bubble.Amount; i++){
bubble.img+='<img class="si" src="' + bubble.imgsrc + '" >';
}
var low=document.getElementById("low");
low.innerHTML=bubble.img;
var si=document.getElementsByTagName("img");
//创建冒泡程序
function MouseBubbles(){
for (var i = 0; i < bubble.Amount; i++){
bubble.Ypos[i] += bubble.Speed[i] * (-1)
bubble.Xpos[i] += bubble.Speed[i] * Math.cos(bubble.angle[i]); ;
if(bubble.Ypos[i]<-25){//当到达最上方后,重新初始化
bubble.Ypos[i] = bubble.my;
bubble.Xpos[i] = bubble.mx;
bubble.Speed[i] = Math.random() * 4 + 1;
bubble.size[i] = 8; //初始尺寸,上限25
}
console.log(si[i]+" "+i);
si[i].style.left = bubble.Xpos[i]; //左右变化
si[i].style.top = bubble.Ypos[i] ;
si[i].style.width = bubble.size[i]; //改变尺寸
si[i].style.height = bubble.size[i];
console.log(bubble.Ypos[i]);//组四行放怀
bubble.size[i] += bubble.sizegrow[i];
bubble.angle[i] += bubble.anglegrow[i];
if (bubble.size[i] > 24) bubble.size[i] = 25;
}
setTimeout('MouseBubbles()', 15);
}
MouseBubbles();
</script>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://www.cnblogs.com/huansky/p/5439454.html


猜你喜欢
- 刚看到吴磊同学的一些关于购物车的想法,正巧本人丁学对电子商务这方面比较熟悉,跳出来献丑了,希望对一些同行有些用处。本来想回复到下面的,结果发
- 无论何时,IE总是让页面制作者感到那么的黯然销魂,尤其是IE6,IE7次之,虽然IE8已经做了很大的改进,但由于XP用户的数量实在太大,而且
- 代码如下:'返回指定文件夹中文件的数目,传入值为被检测文件夹的硬盘绝对路径 function CountFile
- 一,简介退火算法不言而喻,就是钢铁在淬炼过程中失温而成稳定态时的过程,热力学上温度(内能)越高原子态越不稳定,而温度有一个向低温区辐射降温的
- 本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之
- 上次成功升级了最土商业版,接下来就是整合公司的社区网站,先说明一下我现在工作的地方是个地方社区网站,用的基础程序是PHPWind,我的任务就
- 本文讲述了python提示No module named images的解决方法,非常实用!分享给大家供大家参考。具体方法如下:出现提示:I
- vue项目中引入cesium市面上的前端框架中,Vue+Cesium 可谓是最佳搭档,一般做 Cesium B 端产品的公司都会使用 Vue
- 今天学习php,当然是要先安装好运行环境了,phpstyudy是一个运行php的集成环境, 一键安装对新手很友好,与时作为一个新手,便跟着教
- django的url采用正则表达式进行配置,虽然强大却也广为诟病。反对者们认为django的url配置过于繁琐,且不支持默认的路由功能。我倒
- 本文实例讲述了Python3.5编程实现修改IIS WEB.CONFIG的方法。分享给大家供大家参考,具体如下:#!/usr/bin/env
- 强化功能本文针对中大型的后台项目的接口模块优化,在不影响项目正常运行的前提下,增量更新。接口文件写法简化(接口模块半自动化生成)任务调度、L
- 按照下面一步一步来,安 * p就是这么简单。脚本之家下载渗透测试软件Burp Suite Professionalhttps://www.jb
- 这篇文章主要介绍了python批量启动多线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 第一步,去百度地图开发者申请密钥。1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript&
- 在网上看了很多解决方法,都没有解决,后来我自己解决了这个问题:出现的问题:在cmd上 “pip install package” 时显示 s
- UPA2008于2008年10月24日在深圳举行,托哥、绿桔应邀主持了一场圆桌会和一场工作坊,以下是圆桌会议《商业价值与用户价值的平衡》的现
- 本文学习如何在Golang程序中执行Shell命令(如,ls,mkdir或grep),如何通过stdin和stdout传入I/O给正在运行的
- 定义字典 dic = {'a':"hello",'b':"how",
- ddt 是第三方模块,需安装, pip install ddtDDT包含类的装饰器ddt和两个方法装饰器data(直接输入测试数据)通常情况