JavaScript实现的鼠标跟随特效示例【2则实例】
程序员文章站
2022-03-13 17:04:41
本文实例讲述了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>
ps：感兴趣的朋友还可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun 测试上述代码，看看运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
推荐阅读