六安公司做网站,电商网站设计目的,成立公司注册资金一定都要到位吗,东莞软件开发培训机构鼠标是现在电脑的基本配置之一#xff0c;也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。 1、跟随鼠标移动的彩色星星 如题#xff0c;会根据鼠标的移动而移动#xff0c;并在鼠标周围随机来回移动#xff0c;让人感觉在放大缩小。根据书上的代码做了一…鼠标是现在电脑的基本配置之一也是最常用的输入命令的工具之一。本文将将一些与鼠标有关系的特效。 1、跟随鼠标移动的彩色星星 如题会根据鼠标的移动而移动并在鼠标周围随机来回移动让人感觉在放大缩小。根据书上的代码做了一些修改。比如如果用户不移动鼠标是不会显示星星效果的其次就是将源代码中的亮度调节等去掉了因为效果并不是很明显。截了三幅图黑点近似代表鼠标的位置。效果图如下 源代码 html
headtitleTwinkle stars/titlestyle.iestars{ position:absolute; top:00px; left:00px; height:50px; width:50px; padding-top:15px;text-align:center;display:none;}/style
/head
bodyscript language JavaScript//数组保存星星的颜色也可以设置为其它颜色也可以增加或减少颜色数量var coloursnew Array(ff0000,00ff00,0000ff,ff00ff,00ffff,ffff00);var amountcolours.length;//初始化参数var Ydelay0,Xdelay0; //圆环中心的位置var step0.2;var currStep0;var my0,mx0; //记录鼠标当前位置var flag0;//在容器中写入.字符闪烁的星星即是从.变化而来的for (i0; i amount; i){document.write(div class iestars .../div);}//处理鼠标事件function iMouse(){my event.y;mx event.x;//第一次初始化只运行一次if (flag0){delay();flag1;} }document.onmousemove iMouse;var iestarsdocument.getElementsByClassName(iestars);function stars(){for(i 0;i amount;i){var style iestars[i].style; //访问每个容器的style属性style.colorcolours[i];style.displayblock;style.top Ydelay80*Math.sin(currStep/2i*3.1416/3)*Math.sin((currStep)/10); //竖直位置style.left Xdelay80*Math.cos(currStep/2i*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 charsetutf-8titleWater Bubbles/titlestyle.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(opacity40);}/style
/headbody
div idlow
/div
div classcenter
eret
a href#erte/a
rtprtdfffffffffff/p
/div
/body
script languageJavaScript var bubble{imgsrc : img/1.gif,Amount : 15,my : 10, //初始位置 mx : 10, //初始位置Ypos : [], //y数组记录图片的位置Xpos : [], //x数组Speed :[], //上升速度size : [], //范围sizegrow :[], //增长速度angle :[], //余弦曲线的角度anglegrow :[], //每次余弦曲线角度变化img:, }//鼠标事件document.onmousemoveMouseMove; 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()*13; //速度在[1,4) bubble.angle[i] 0; bubble.anglegrow[i] Math.random()*0.50.1; //角度变换[0.2,0.6)bubble.size[i] 8; bubble.sizegrow[i] Math.random()*12; //尺寸变换[0.5,0.6)} for (i 0; i bubble.Amount; i){bubble.imgimg classsi src bubble.imgsrc ; }var lowdocument.getElementById(low);low.innerHTMLbubble.img;var sidocument.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
