javascript实例——鼠标特效篇(包含2个实例)
鼠标是现在电脑的基本配置之一,也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。
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>
View Code
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="#">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
javascript实例——鼠标特效篇(包含2个实例)相关推荐
- JavaScript 之 网页特效篇(offset系列、client系列、scroll系列、动画函数封装、常见网页特效)
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 可以获取 ...
- 教你用JavaScript制作鼠标特效
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个鼠标爱心特效.鼠标在页面移动时会出现彩色爱心特效.通过实战我们将学会createE ...
- JavaScript 进阶知识 - Ajax篇
Ajax 前言 前面我们已经学习了js基础知识和一些简单的特效,基本上已经能够写出一个带有特效的静态页面了,为什么还要称之为静态页面呢?因为网页里的数据都是写死的,真正的工作中,我们是要通过Ajax技 ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
- html js相册样式,JavaScript+CSS相册特效实例代码
下面小编就为大家带来一篇JavaScript+CSS相册特效实例代码.小编觉得挺不错的,现在就分享JavaScript+css的源码给大家,也给大家做个参考.对JavaScript和css制作相册感兴 ...
- C#开发实例 鼠标篇
鼠标的操作控制: 鼠标是计算机的一个重要组成部分,有很多默认的设置,如双击时间间隔,闪烁频率,移动速度等,本篇使用C#获取这些基本的信息. 1.1获取鼠标信息 ①实例001 获取鼠标双击时间间隔 主要 ...
- html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
- javascript网页特效——鼠标特效
实例一:禁用鼠标右键 <script type="text/javascript">//为文档的鼠标按下事件定义回调document.onmousedown = fun ...
- 深入理解javascript函数系列第二篇——函数参数
前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...
最新文章
- 中国AI论文普遍水?机器学习教父Tom Mitchell的回答是……
- C#高级编程----错误和异常的总结
- java第k大的数字,JAVA中寻找最大的K个数解法
- 杂项-Log:NLog
- 充电桩服务器协议,充电桩与云服务器通信协议
- OpenCV霍夫直线houghlines点集的实例(附完整代码)
- WebRTC 音频模块单独编译 --【转载】
- 计算一个人出生了多少天(炸窝)
- Spring Cloud Hystrix的请求合并
- Leetcode--322. 零钱兑换
- Android-关于屏幕适配的一些经验
- 陈纪修老师《数学分析》 第12章:多元函数微分学 笔记
- 暴风雨前的耳聋:普京在9·11前两天致电布什,警告可能发生恐袭
- mysql的语句大全_mysql语句大全
- ORA-00932: 数据类型不一致: 应为 CHAR, 但却获得 NUMBER
- win10分辨率不能调整_笔记本win10系统调整外接显示器分辨率的方法
- Windows 2016 出現 0xc0000135 ServerManager.exe 无法启用
- 【量化笔记】动量Momentum相关技术指标以其含义
- 豆瓣电影Top250信息爬取并保存到excel文件中!
- Postgresql中,计算两个日期月份差值或年月日,实现Oracle中months_between、add_months的效果
热门文章
- iphone如何查看dns延迟_iPhone手机网速慢?1分钟教你设置DNS,网速立马翻一番
- tcpcopy使用方法
- MachineLearning(8)-PCA,LDA基础+sklearn 简单实践
- Linux加密框架 crypto 哈希算法举例 MD5
- 概率论 条件概率 全概率 贝叶斯公式
- Android设计模式之——Builder模式
- FreeBSD 10 将使用 Clang 编译器替换 GCC
- 数字电视制播设备间的文件交换格式
- 软件行业为什么那么多项目经理
- springCloud - 第7篇 - 配置文件管理中心 ( SpringCloud Config )