您的位置：首页 > Web前端 > JavaScript

javascript实例——鼠标特效篇(包含2个实例)

2016-04-27 16:44 573 查看

鼠标是现在电脑的基本配置之一，也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。

1、跟随鼠标移动的彩色星星

如题，会根据鼠标的移动而移动，并在鼠标周围随机来回移动，让人感觉在放大缩小。根据书上的代码做了一些修改。比如，如果用户不移动鼠标，是不会显示星星效果的：其次就是将源代码中的亮度调节等去掉了，因为效果并不是很明显。截了三幅图，黑点近似代表鼠标的位置。效果图如下：

<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="#">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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航