JS特效代码 - 文档之家

下载文档原格式

/ 14

如何在JavaScript中实现网页的动画和特效

如何在JavaScript中实现网页的动画和特效JavaScript是一种强大的编程语言，它可以用来为网页添加动画和特效。

在本文中，我们将学习如何使用JavaScript实现网页动画和特效。

1.使用CSS动画：JavaScript可以与CSS动画配合使用，通过控制CSS属性的变化来实现动画效果。

可以通过添加或移除类来触发CSS 动画，也可以使用JavaScript直接修改CSS属性的值。

以下是一些常见的CSS属性，可以用来实现动画效果：- transform：可以利用translate、scale、rotate等函数来改变元素的位置、尺寸和旋转角度。

- opacity：可以通过改变元素的不透明度来实现淡入淡出效果。

- transition：可以使用过渡效果来平滑地改变元素的属性值。

通过在JavaScript中创建类或直接操作元素的样式，可以通过移动、旋转和改变元素的透明度来实现各种动画效果。

2.使用setTimeout和setInterval函数：JavaScript中的setTimeout和setInterval函数可以用来设置定时器，通过定时器来触发函数的执行。

在动画和特效中，可以使用setTimeout函数来延迟执行某个函数，来实现延迟效果。

setInterval函数可以用来循环执行一个函数，从而实现连续播放的效果。

3.使用requestAnimationFrame函数：requestAnimationFrame是一个优化的浏览器API，它可以在每次浏览器重绘之前调用一个回调函数，通常用于执行动画。

与setTimeout和setInterval不同，requestAnimationFrame会根据浏览器的绘制能力来调整动画的帧率，保证动画的流畅性并减少浏览器的负载。

使用requestAnimationFrame函数来调用动画函数，可以使用递归的方式来循环播放动画，通过不断更新元素的位置、尺寸和样式来实现动画效果。

js闪烁的星空特效源码

1 颜色选择器<HTML><HEAD><TITLE>页面背景篇--颜色选择器</TITLE></HEAD><BODY bgcolor="#fef4d2" ><br><br><center><h2>页面背景篇--颜色选择器</h2><hr width=300><br><form><select size=6 name=clronchange="document.bgColor=this.options[this.selectedIndex].value"> <option value="blue" selected>蓝色<option value="gold">金色<option value="red">红色<option value="yellow">黄色<option value="aquamarine">碧绿色<option value="darkred">暗红色<option value="cadetblue ">灰蓝色<option value="darkkhaki">黄褐色<option value="slateblue">蓝灰色<option value="deeppink">粉红色<option value="tan">棕褐色<option value="wheat">淡黄色<option value="turquoise">青绿色</select></form></BODY></HTML>2 闪烁星空<HTML><HEAD><TITLE>页面背景篇--闪烁星空</TITLE></HEAD><BODY bgcolor="#fef4d2" onload=Start() onunload=End()><br><br><center><h2>页面背景篇--闪烁星空</h2><hr width=300><br><br><script language=JavaScript>hexa = new Array(16);for(var i = 0; i < 10; i++) hexa[i] = i;hexa[10]="a";hexa[11]="b";hexa[12]="c";hexa[13]="d";hexa[14]="e";hexa[15]="f";function hex(i){if (i < 0) return "00";else if (i > 255) return "ff";else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}for(i=1;i<=10;i++){document.write("<div id=\"Picture004"+i+"\"style=\"position:absolute;top:80%;left:"+(Math.floor(Math.random()*5)+9*(i-1))+"%;width:21;height:21;visibility:hidden;\"><dd><img src=\"Picture004.gif\" WIDTH=\"21\" HEIGHT=\"21\"></dd></div>");}function Start(){setInterval("randommove()",1000);set_visible();setTimeout("bar_show()",2000);}function randommove(){for(i=1;i<=10;i++)eval("Picture004"+i+".style.top=get_top()");}function get_top(){var t,t2;t=Math.floor(Math.random()*380);t2=t.toString()+"px";return(t2);}function bar_show(){bar.style.visibility="visible";}function set_visible(){for(i=1;i<=10;i++)eval("Picture004"+i+".style.visibility=\"visible\"");banner.style.visibility="visible";friends.style.visibility="visible";high(pic);}function End(){banner.style.visibility="hidden";friends.style.visibility="hidden";pic.style.visibility="hidden";}function killErrors() {return true;}window.onerror = killErrors;</script></BODY></HTML>3 平铺背景图形<HTML><HEAD><TITLE>页面背景篇--平铺背景图形</TITLE> </HEAD><BODY bgcolor="#fef4d2" ><br><br><center><h2>页面背景篇--平铺背景图形</h2><hr width=300><br><br><script language=JavaScript>function BGPicture(picture) {document.write("<body background="+picture+">"+"</body>");}</script><form>浏览要平铺的背景图形： <br><input type="file" size="20" name="url"><br><input TYPE="button" VALUE="平铺背景图形"onClick="BGPicture("file:///"+ document.forms[0].url.value)"> </form></BODY></HTML>4 自制色彩模型<HTML><HEAD><TITLE>页面背景篇--自制色彩模式</TITLE></HEAD><BODY bgcolor="#fef4d2" ><br><br><center><h2>页面背景篇--自制色彩模式</h2><hr width=300><br><form><input type="text" name="color" size="20"><br><br> <input TYPE="button" value="输入色彩并点击" ONCLICK="document.bgColor=(this.form.color.value)"> </form></BODY></HTML>5 逐渐减弱效果<HTML><HEAD><TITLE>页面背景篇--逐渐减弱效果</TITLE></HEAD><BODY bgcolor="#fef4d2" onload=FadeBGColor()><br><br><center><h2>页面背景篇--逐渐减弱效果</h2><hr width=300><br><br><script language=JavaScript>var index = 0;var loop = 1;var factor = new Array(1,1,1);var firstfactor = new Array(1,1,1);var secondfactor = new Array(1,1,1);var startcolor = new Array(100,255,200);var middlecolor = new Array(100,50,0);var endcolor = new Array(100,255,200);var color = new Array(startcolor[0],startcolor[1],startcolor[2]);var nextcolor = new Array(middlecolor[0],middlecolor[1],middlecolor[2]);var hex = new Array;var letters = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');function FadeBGColor() {for (i=0 ; i <=2 ; i++) {if (middlecolor[i] == startcolor[i]) { firstfactor[i] = 0; }if (middlecolor[i] > startcolor[i]) { firstfactor[i] = -1; }if (endcolor[i] == middlecolor[i]) { secondfactor[i] = 0; }if (endcolor[i] > middlecolor[i]) { secondfactor[i] = -1; }factor[i] = firstfactor[i]; }FadeColoring = setTimeout('FadeColor()',1);}function FadeColor() {for (i=0 ; i<=2 ; i++) {firstletter = Math.floor(eval(color[i] / 16));secondletter = eval(color[i] -(firstletter * 16));hex[i] = letters[firstletter]+letters[secondletter];color[i] = color[i] - (factor[i] * 10);if (((color[i]*factor[i])-(nextcolor[i]*factor[i])) <= 0) {factor[i] = 0;color[i] = nextcolor[i];}}document.bgColor = '#'+hex[0]+hex[1]+hex[2];if (((Math.abs(factor[0]) + Math.abs(factor[1]) + Math.abs(factor[2])) ==0)&&((color[1] != endcolor[1])||(color[2] != endcolor[2])||(color[0] !=endcolor[0]))){for (i=0 ; i<=2 ; i++) { nextcolor[i]=endcolor[i]; factor[i]=secondfactor[i]; } } if ( (Math.abs(factor[0]) + Math.abs(factor[1]) + Math.abs(factor[2])) != 0 ){FadeColoring = setTimeout('FadeColor()',10); }else {if (loop == 1){for (i=0 ; i<=2 ; i++) {factor[i]=firstfactor[i];color[i]=startcolor[i];nextcolor[i]=middlecolor[i]; }FadeColoring = setTimeout('FadeColor()',10); } }}function StopFadeBGColor(){index = 1;clearTimeout(FadeColoring)}function ReFadeBGColort(){if (index == 1){ FadeColoring = setTimeout('FadeColor()',1); }}</script><a href="javascript:ReFadeBGColort();">开始</a><a href="javascript:StopFadeBGColor();">停止</a></BODY></HTML>6 调色板<HTML><HEAD><TITLE>页面背景篇--调色板</TITLE></HEAD><BODY bgcolor="#fef4d2" ><br><br><center><font color="ffaafa"><h2>页面背景篇--调色板</h2></font> <hr width=300><br><script language=JavaScript>var indexcolor = new Array(6)indexcolor[0] = "00"indexcolor[1] = "33"indexcolor[2] = "66"indexcolor[3] = "99"indexcolor[4] = "CC"indexcolor[5] = "FF"function DrawBGColorCube() {document.write('<TABLE CELLPADDING=3 CELLSPACING=0 BORDER=2><TR>') for (var i = 0; i < 3; ++i) {document.write('<td bgcolor="#ccffcc">')DrawBGColorTable(indexcolor[i])document.write('</TD>') }document.write('</TR></TABLE>')}function DrawBGColorTable(blue) {document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')for (var i = 0; i < 5; ++i) { DrawBGColorRow(indexcolor[i], blue) }document.write('</TABLE>')}function DrawBGColorRow(red, blue) {document.write('<TR>')for (var i = 0; i < 5; ++i) { DrawBGColorCell(red, indexcolor[i], blue) }document.write('</TR>')function DrawBGColorCell(red, green, blue) {document.write('<TD BGCOLOR="#' + red + green + blue + '">')document.write('<A HREF="javascript:DisplayColor(\'' + (red + green + blue) + '\')">')document.write('<IMG SRC="place.gif" BORDER=1 HEIGHT=12 WIDTH=12>') document.write('</A>')document.write('</TD>')}function DisplayColor(triplet) {document.bgColor = '#' + triplet}DrawBGColorCube()</script></BODY></HTML>7 获取色彩模型<HTML><HEAD><TITLE>页面背景篇--获取色彩模式</TITLE></HEAD><BODY bgcolor="#fef4d2" ><br><br><center><h2>页面背景篇--获取色彩模式</h2><hr width=300><br><script language=JavaScript>function GetBGColor(form, ColorName) {document.bgColor = ColorName;ame.value = ColorName;}</script><form METHOD="POST" NAME="bgcolor">当前颜色是：<input TYPE="text" NAME="CName" VALUE="aquamarine" size="10"><br> <table border="1" cellpadding="5" cellspacing="3" ><tr><td><font size="3" color="navy"><input NAME="bgcolor" TYPE="radio" onclick="GetBGColor(this.form,'deeppink')" >粉红色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'aquamarine')"checked>碧绿色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'tan')">棕褐色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'wheat')">淡黄色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'slateblue')">蓝灰色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'turquoise')">青绿色<br><input NAME="bgcolor" TYPE="radio" ONCLICK="GetBGColor(this.form,'darkkhaki')">黄褐色<br> </font></td></tr></table></BODY></HTML>8 定制色彩间隔<HTML><HEAD><TITLE>页面背景篇--定制色彩间隔</TITLE></HEAD><BODY bgcolor="#fef4d2" ><br><br><center><h2>页面背景篇--定制色彩间隔</h2><hr width=300><br><br><script language=JavaScript>sunset = new Array("skyblue", "slateblue", "violet", "darkorange", "red", "darkred");function BGColor(color){scheme = color;document.bgColor = scheme.c1;setTimeout('document.bgColor = scheme.c2', document.selector.interval.value * 20); setTimeout('document.bgColor = scheme.c3', document.selector.interval.value * 30); setTimeout('document.bgColor = scheme.c4', document.selector.interval.value * 40); setTimeout('document.bgColor = scheme.c5', document.selector.interval.value * 50); setTimeout('document.bgColor = scheme.c6', document.selector.interval.value * 60); }function Array(c1, c2, c3, c4, c5, c6){this.c1 = c1; this.c2 = c2; this.c3 = c3;this.c4 = c4; this.c5 = c5; this.c6 = c6;}</script><form name="selector"><input type="button" value="日落美景" onclick="BGColor(sunset)"><br> 设置颜色间隔：<input type="text" size="3" name="interval" value="50"></form></BODY></HTML>。

javascript刮刮卡特效代码

<!DOCTYPE html><html><body><title>js刮刮卡特效代码</title><canvas/><script>(function(bodyStyle) {bodyStyle.mozUserSelect = 'none';bodyStyle.webkitUserSelect = 'none';var img = new Image();var canvas = document.querySelector('canvas');canvas.style.backgroundColor='transparent';canvas.style.position = 'absolute';img.addEventListener('load', function(e) {var ctx;var w = img.width,h = img.height;var offsetX = canvas.offsetLeft,offsetY = canvas.offsetTop;var mousedown = false;function layer(ctx) {ctx.fillStyle = 'gray';ctx.fillRect(0, 0, w, h);}function eventDown(e){e.preventDefault();mousedown=true;}function eventUp(e){e.preventDefault();mousedown=false;}function eventMove(e){e.preventDefault();if(mousedown) {if(e.changedTouches){e=e.changedTouches[e.changedTouches.length-1];}var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;with(ctx) {beginPath()arc(x, y, 5, 0, Math.PI * 2); //fill();}}}canvas.width=w; //canvas.height=h; //canvas.style.backgroundImage='url('+img.src+')';ctx=canvas.getContext('2d');ctx.fillStyle='transparent';ctx.fillRect(0, 0, w, h);layer(ctx);ctx.globalCompositeOperation = 'destination-out';canvas.addEventListener('touchstart', eventDown);canvas.addEventListener('touchend', eventUp);canvas.addEventListener('touchmove', eventMove);canvas.addEventListener('mousedown', eventDown);canvas.addEventListener('mouseup', eventUp);canvas.addEventListener('mousemove', eventMove);});img.src = 'prize.jpg'; //www.baxin.hk})(document.body.style);</script></body></html><style>body{margin:50px;background-color:#2C3437;}.content{display:inline-block;width:350px;height:239px;margin-right:-4px;}.play{cursor:pointer;background-color:#060;}div>div{display:block;height:20px;}div>div>div{width:16px;height:16px;background-color:#FFF;display:inline-block;float:right;margin:2px;}</style><script>$(document).ready(function(){ animate();$(".play").click(animate).mouseover(function(){$(".play").css({"background-color":"#A55"});}).mouseout(function(){$(".play").css({"background-color":"#060"});});});function animate(){$('div>div>div').each(function(id){$(this).css({position: 'relative',top: '-200px',opacity: 0});var wait = Math.floor((Math.random()*3000)+1);$(this).delay(wait).animate({top: '0px',opacity: 1},1000);});}</script>。

JS图片屏幕旋转特效代码

JS图片旋转特效代码JS图片旋转代码，像屏幕一样围成柱体圆形的图片旋转特效，图片的高度和宽度可自设，图片路径也可自定义，还有旋转速度也可以自定义调节。

<body onLoad="Carousel()"><script type="text/javascript">var Car_Image_Width=320;var Car_Image_Height=275;var Car_Border=true;var Car_Border_Color="white";var Car_Speed=4;var Car_Direction=true;var Car_NoOfSides=8;Car_Image_Sources=new Array("/jscss/demoimg/wall_s2.jpg","","/jscss/demoimg/wall_s3.jpg","","/jscss/demoimg/wall_s4.jpg","", //this slide isn't linked"/jscss/demoimg/wall_s7.jpg","" // NOTE No comma after last line);CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);C_Coef=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;C_Pre_Img=new Array(Car_Image_Sources.length);varC_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_T otalW,C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;function Carousel(){if(document.getElementById){for(i=0;i<Car_Image_Sources.length;i+=2){C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]} C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;Car_Div=document.getElementById("Carousel");for(i=0;i<C_HalfNo;i++){CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);CW_I[i].style.position="absolute";CW_I[i].style.top=0+"px";CW_I[i].style.height=Car_Image_Height+"px";if(Car_Border){CW_I[i].style.borderStyle="solid";CW_I[i].style.borderWidth=1+"px";CW_I[i].style.borderColor=Car_Border_Color}CW_I[i].src=Car_Image_Sources[2*i];CW_I[i].lnk=Car_Image_Sources[2*i+1];CW_I[i].onclick=C_LdLnk;CW_I[i].onmouseover=C_Stp;CW_I[i].onmouseout=C_Rstrt}CarImages()}}function CarImages(){if(!C_Stppd){C_TotalW=0;for(i=0;i<C_HalfNo;i++){C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_ Width);C_TotalW+=C_ClcW[i]}C_LeftOffset=(C_MaxW-C_TotalW)/2;for(i=0;i<C_HalfNo;i++){CW_I[i].style.left=C_LeftOffset+"px";CW_I[i].style.width=C_ClcW[i]+"px";C_LeftOffset+=C_ClcW[i]}C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){ if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;if(Car_Direction){CW_I[C_HalfNo]=CW_I[0];for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];CW_I[0]=CW_I[C_HalfNo];CW_I[0].src=Car_Image_Sources[C_CrImg];CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}} setTimeout("CarImages()",50)}function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}function C_Rstrt(){C_Stppd=false}</script>吕延良博客整理发布，更多的网站特效和广大站长分享讨论！<div id="Carousel" style="position:relative"></div>。

七个基于JavaScript实现的情人节表白特效

七个基于JavaScript实现的情⼈节表⽩特效⽬录七⼣情⼈节送花动画告⽩特效玫瑰花盛开动画告⽩特效3d旋转相册点击爱⼼散开动画告⽩特效雷电打出告⽩⽂字特效粒⼦组合告⽩⽂字特效⼩熊拉⼿CSS3情⼈节动画表⽩特效七⼣情⼈节送花动画告⽩特效效果展⽰代码展⽰:<div id='content'><ul class='content-wrap'><li><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><div id="sun"></div></li><li><div class="b_background"></div><div class="b_background_preload"></div><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><div class="lamp"></div></div><div class="bird"></div></li><li><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><div class="logo">祝天下有情⼈终成眷属</div></li></ul><div id="snowflake"></div><div id="boy" class="charector"></div></div>玫瑰花盛开动画告⽩特效效果展⽰:<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)"> <stop offset="0" style="stop-color: rgb(255, 0, 0);"/><stop offset="1" style="stop-color: rgb(141, 41, 41);"/></radialGradient>var svg = document.getElementById('svg');var animation0 = document.getElementById('animate0');svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });var animation1 = document.getElementById('animate1');svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });var animation2 = document.getElementById('animate2');svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });var animation3 = document.getElementById('animate3');svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });var animation4 = document.getElementById('animate4');svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });var animation5 = document.getElementById('animate5');svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });var animation6 = document.getElementById('animate6');svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });var animation7 = document.getElementById('animate7');svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });var animation8 = document.getElementById('animate8');svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });var animation9 = document.getElementById('animate9');svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });var animation10 = document.getElementById('animate10');svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });var animation11 = document.getElementById('animate11');svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });var animation12 = document.getElementById('animate12');svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });var animation13 = document.getElementById('animate13');svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });var animation14 = document.getElementById('animate14');svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });3d旋转相册效果展⽰:代码展⽰:<div class="hovertreeinfo"><h2></h2></div><audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不⽀持audio属性</audio><script type="text/javascript">//--创建页⾯监听，等待微信端页⾯加载完毕触发⾳频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页⾯时，触摸屏幕触发事件，进⾏⾳频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><div class="wrap"><div class="cube"><div class="out_front"><img src="img/img01.jpg " class="pic" /></div><div class="out_back"><img src="img/img02.jpg" class="pic"/></div><div class="out_left"><img src="img/img03.jpg" class="pic" /></div><div class="out_right"><img src="img/img04.jpg" class="pic" /></div><div class="out_top"><img src="img/img05.jpg" class="pic" /></div><div class="out_bottom"><img src="img/img06.jpg" class="pic" /><span class="in_front"><img src="img/img07.jpg" class="in_pic" /></span><span class="in_back"><img src="img/img08.jpg" class="in_pic" /></span><span class="in_left"><img src="img/img09.jpg" class="in_pic" /></span><span class="in_right"><img src="img/img10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/img11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/img12.jpg" class="in_pic" /></span></div></div>点击爱⼼散开动画告⽩特效效果展⽰:代码展⽰:<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white">  </svg><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div>雷电打出告⽩⽂字特效效果展⽰:代码展⽰:<div class="page page-thunder-to-text"><input id="input" type="text" maxlength="24" placeholder="I love you!"><canvas id="canvas"></canvas></div><script>let canvas, ctx, w, h, thunder, text, particles, input;function Thunder(options) {options = options || {};this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);this.maxlife = this.lifespan;this.color = options.color || '#fefefe';this.glow = options.glow || '#2323fe';this.x = options.x || Math.random() * w;this.y = options.y || Math.random() * h;this.width = options.width || 2;this.direct = options.direct || Math.random() * Math.PI * 2;this.max = options.max || Math.round(Math.random() * 10 + 20);this.segments = [...new Array(this.max)].map(() => {return {direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),length: Math.random() * 20 + 80,change: Math.random() * 0.04 - 0.02};});this.update = function(index, array) {this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });(this.lifespan > 0 && this.lifespan--) || this.remove(index, array);}this.render = function(ctx) {if (this.lifespan <= 0) return;ctx.beginPath();ctx.globalAlpha = this.lifespan / this.maxlife;ctx.strokeStyle = this.color;ctx.lineWidth = this.width;ctx.shadowBlur = 32;ctx.shadowColor = this.glow;ctx.moveTo(this.x, this.y);let prev = { x: this.x, y: this.y };this.segments.forEach(s => {const x = prev.x + Math.cos(s.direct) * s.length;const y = prev.y + Math.sin(s.direct) * s.length;prev = { x: x, y: y };ctx.lineTo(x, y);});ctx.stroke();ctx.closePath();ctx.shadowBlur = 0;const strength = Math.random() * 80 + 40;const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength); light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');ctx.beginPath();ctx.fillStyle = light;ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);ctx.fill();ctx.closePath();}this.remove = function(index, array) {array.splice(index, 1);}}粒⼦组合告⽩⽂字特效效果展⽰:代码展⽰:;(function(main) {var args = {};window.onload = function() {main(args);};})(function(args) {'use strict';var Box = function(x, y, w, h, s) {this.x = x;this.y = y;this.w = w;this.h = h;this.s = s;this.a = Math.random() * Math.PI * 2;this.hue = Math.random() * 360;};Box.prototype = {constructor: Box,update: function() {this.a += Math.random() * 0.5 - 0.25;this.x += Math.cos(this.a) * this.s;this.y += Math.sin(this.a) * this.s;this.hue += 5;if(this.x > WIDTH) this.x = 0;else if(this.x < 0) this.x = WIDTH;if(this.y > HEIGHT) this.y = 0;else if(this.y < 0) this.y = HEIGHT;},render: function(ctx) {ctx.save();ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';ctx.translate(this.x, this.y);ctx.rotate(this.a);ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);ctx.restore();}};var Circle = function(x, y, tx, ty, r) {this.x = x;this.y = y;this.ox = x;this.oy = y;this.tx = tx;this.ty = ty;this.lx = x;this.ly = y;this.r = r;this.br = r;this.a = Math.random() * Math.PI * 2;this.sx = Math.random() * 0.5;this.sy = Math.random() * 0.5;this.o = Math.random() * 1;this.delay = Math.random() * 200;this.delayCtr = 0;this.hue = Math.random() * 360;};⼩熊拉⼿CSS3情⼈节动画表⽩特效效果展⽰:代码展⽰:<div class="stage"><div class="couple"><div class="heart floating"></div><div class="bear he"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="hand"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div><div class="bear she"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div></div></div>到此这篇关于七个基于JavaScript实现的情⼈节表⽩特效的⽂章就介绍到这了,更多相关JavaScript表⽩特效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

【JavaScript】Javascript特效代码大全

{
if(animation == "flyLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyRight")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
if(animation == "spiral") {
steps = stepsSpiral v = step/steps rf = 1.0 - v t = v * 2.0*Math.PI rx = Math.max(Math.abs(el.initLeft), 200) ry = Math.max(Math.abs(el.initTop), 200) el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx) el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry) } else if(animation == "zoomIn") { steps = stepsZoom el.style.fontSize = Math.ceil(50+50*step/steps) + "%" el.style.posLeft = 0 } else if(animation == "zoomOut") { steps = stepsZoom el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%" el.style.posLeft = 0 } else { steps = stepsFly if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")

Javascript特效代码大全(420个)

Javascript特效代码大全(420个)Javascript 特效代码├Cookie脚本├随访问次数变提示├集成Cookies ├使窗口仅弹出一次├签名提示程序├记录上次登录时间├自由控制打开窗口├记录页面修改时间├检测IE去过站点├离开时显示信息├弹出窗口自动关闭├离开页面弹出窗口├进入时显示信息├离开启动收藏夹├链接确认按钮├点击加入收藏夹├记录页面更新时间├页面载入等待├打开硬盘驱动器├设置默认首页├输入框测试警告├链接弹出警告框├关闭窗口链接├显示器分辨率检测├按分辨率导航├定制打开的窗口├控制窗口打开日期├打开窗口居中├输入框控制├查看输入框内容├显示所有链接├限时载入页面├输入框神秘消失├检测访问来源├回退的页面数├危险的链接├倒计时载入页面├自由打开窗口├检测IE所装插件├检测点链接速度├检测健康程度？├页面中打开窗口├特殊的Bookmark ├窗口打开关闭程序├随机显示一些数字├页面自动打开├进入弹出收藏夹├自动显示是否更新├浏览器详细报告├页面背景类├背景向下移动├背景不停变换色彩├使页面产生百叶窗├颜色代码英文集├自已选择背景颜色├背景颜色安全测试├颜色选择器├背景图片居中├页面转换特效├礼花背景├链接驱动背景色├手动调节背景色├鼠标使链接变色├跟随鼠标旋转背景├背景调色板├RGB颜色转换├按钮驱动背景├颜色选择器├精彩的变色文字├颜色选择器├闪烁的霓虹灯├星星从背景中飞出├背景向下移动(二) ├动态选择背景色├下雨├按钮驱动背景变化├按钮使背景闪烁├背景随机显示├背景快速闪烁├自己选择背景图片├文本特效类├随机信息显示├随机文本链接├所有链接不停变色├鼠标经过文字变色├随日期变换文本├文字颜色渐变脚本├文本自动输出├文字特效├文字不停变色├字符连续消隐├公告栏├文字动态变化├字符飞舞├文字特殊显示├文字从旁边出现├文本从右向左输出├消息显示器├随机跳出信息窗口├随机产生乱码├输入框各种效果├文字从左到右出现├信息逐条出现├选择显示文字方式├文字来回反弹├文字逐个出现├电子管显示├文字循环出现├可调节速度的撞击├逐字出现的信息条├自由控制文字输入├一段彩色的文字├可调节的输出形式├文字同时输出├调节文字移动形式├文字飘动输出├各种形式文字输出├文字逐个闪烁├文字上下跳动├文字变色逐个出现├点击改变文字├文字段任意移动├文字连续闪烁├点击出现链接├状态栏条├链接在右面打开├文字胡乱跳动├文字段到处飞舞├按钮驱动文字渐变├文字向左移动├文字弯曲变形├双重输入文字├综合字符集├文字从小变大├导航菜单类├树形菜单(一) ├树形菜单(二) ├树形菜单(三) ├页面搜索类├站内搜索脚本(一) ├站内搜索脚本(二) ├站内搜索脚本(三) ├站内搜索脚本(四) ├站内搜索脚本(五) ├站内搜索脚本(六) ├内部搜索脚本├时间日期类├任意位置显示时钟├倒计时代码生成器├八种风格时间显示├显示登陆时间├日历生成器├退出显示访问时间├一款特酷的时钟├全中文日期显示├纯JavaScript时钟├距离某天时间├显示特殊节日脚本├时钟加在背景上├Form 中的时钟├带开关的Form时钟├距离某日时间├记录几天后的日期├Form栏特全时钟├全球时间表├随时间变化提示├特酷的倒影时钟├特酷的日期显示├2000年日历├时间日期转换├时间跳动器├自己创建日历├生日提醒器├计算任一天星期几├离开某一天日期├按钮上的时间├Form中时间显示├检测星期几并导航├最近的星期天├全日制时钟├用图片显示日期├详细计算你的年龄├时间按钮提醒├计算出生时间├页面完成时间├页面导航类├显示站点信息导航├任意显示导航信息├动态导航脚本├下拉式导航菜单├静止导航菜单├静止图片脚本├文本静止不动├信息框显示链接├友情链接导航框├目录式导航菜单├重要信息说明脚本├滚动链接导航├图片代替按钮脚本├打开窗口等待├静态导航菜单├层叠式导航菜单├隐现导航脚本├页面内部导航├图片代替按钮脚本├打开窗口等待├滚动的超级链接├先后点击链接├按钮选择导航├不停变化的导航├随机的导航├链接窗口说明├同时打开多个链接├打开链接显示信息├又一动态导航脚本├Form框中导航├屏幕翻滚导航├带说明的导航├任意多友情链接├链接自动说明脚本├开始选择导航├链接处出现图标├导航菜单选择├按钮特效类├跑马灯式链接说明├窗口打开关闭├浮动的链接说明├链接处变换色彩├变换链接色和底色├按顺序点击链接├查看源代码按钮├前进后退按钮├按钮定制打开窗口├按钮打开全屏窗口├自由打开各种窗口├按钮回到默认首页├各种用途的按钮├频道方式打开窗口├按钮特殊效果├浏览器全屏显示├死机程序├跳出说明窗口├关不掉的跳出框├循环的警告框├检测页面来源├屏幕抖动脚本├页面被冻结├代码生成类├动态按钮代码生成├浏览器检测生成器├BrowserCheck脚本├彩色文字生成器├分割Frame的代码├主页制作器├综合类├加密页面源代码├访问时间限制├给页面加“热键” ├浏览器毁灭者├文本中首字母大写├查看某网址源代码├文本中首字母大写├综合的搜索引擎├搜索引擎登记├下载记时器脚本├随机播放背景音乐├随日期播放音乐├E-mail表单递交├Jsp容错脚本├计算器(一) ├计算器(二) ├计算器(三) ├网页调用另外网页├FTP页面登录├根据浏览器用CSS ├输入框的新属性├数字排序├发信(一) ├发信(二) ├发信(三)├发信(四) ├发信(五) ├发信(六) ├E-mail递交├元素周期表├显示人口数量├计算平面两点距离├页面自动刷新├又一个容错脚本表├打开多个搜索引擎├可选择的页面信息├直接页面显示器├MIDI音乐选择├页面特效类├字符从空中掉下来├打字机式输出文字├滚动显示的LOGO ├文本自动滚屏├控制别人输入字数├文本上下弹跳├特酷消隐字体├文本框栏目介绍├旋转变换文字├特酷的文本输出├页面自动滚屏效果├炽热的文字特效├鼠标响应文字变色├隐藏显示字符脚本├鼠标响应图片变化├星星满天闪烁├打开页面颜色渐变├页面打开特效├英文名字变日文├页面上下滚动├页面缩小特效├页面左右分开├特殊的HTML字符├图片满天飞舞├页面掉下去├页面向右滚屏├综合页面特效├图形图象类├禁止图片下载├图片隐现效果├随机显示图片├图片变形扭曲├雪景├图片渐渐出现├相片选择器├图形循环渐显├图形左右晃动├图形选择脚本├图片翻滚导航├图片定期消失├自由控制图片下载├自由设定图片大小├图片响应鼠标变换├图片自由运动├图片大小变换├图片随意移动├自动显示图片属性├图片循环显现├图片变化效果├随机显示banner ├鼠标驱动图片变化├图片不停闪烁├鼠标事件类├图片跟随鼠标├鼠标响应新页面├禁用鼠标左右键├鼠标控制窗口开关├鼠标点击效果├禁用右键自动导航├鼠标激活警告框├鼠标跟踪器├右键自动链接页面├跟随鼠标的星星├右键打开收藏夹├字符围绕鼠标├各种形状的鼠标├跟随鼠标的字符├非图片鼠标跟踪器├显示链接特征├改变链接属性├显示鼠标坐标├随鼠标的彩色字符├状态栏特效├状态栏跑马灯脚本├文字从右弹出├文字从左依次弹出├文字从右到左移动├文字快速依次弹出├文字组合弹出├文字不停闪烁├状态栏显示链接├title显示日期├文字来回出现├状态栏固定信息├状态栏特殊显示├虚拟格式化硬盘├状态栏显示输入├title显示时间├病毒入侵演示├文字从前后出现├文字慢慢出现├状态栏特殊效果├文字从中间出现├文字分解出现├输入字符在状态栏├文字多处出现├Title特效├调节文字显示速度├状态栏标准时钟├密码类├控制他人进入页面├用来实现会员制度├密码保护相应页面├自己编制密码表├密码保护页面(一)├游戏类├一款流行游戏├双人小游戏├动脑小游戏├模拟跳舞游戏├测试点击速度├模拟太空飞行├一个输赢游戏├测试打字速度├测试心算能力├选择路线游戏├射击小游戏├字符在FORM中坠落├堆积游戏├21点游戏├猜数的大小├找相同的图片├在线测试类├在线考试脚本(一) ├在线考试脚本(二) ├在线考试脚本(三) ├在线考试脚本(四) ├在线考试脚本(五) ├在线考试脚本(六) ├测试警告├技巧类├两个脚本同时调用├加快图片显示├页面自动刷新├模拟跳舞游戏├光标选择输入框├更方便的单选框├输入框无法输入├HTML加入jsp ├自动跳出Frame ├禁止页面加入缓存├制作分析统计器├密码输入框的问题├屏蔽HTML(说明) ├输入框特殊效果。

Javascript特效代码大全(420个)

JavaScript网页特效经典300例

JavaScript网页特效经典300例
第1篇 JavaScript基础篇
第1章网页特效
第2章DOM操作
第3章控制表单控件
第4章窗口的控制和框架的互操作
第5章鼠标特效
第6章按钮特效
第7章链接特效
第8章文本输入框和下拉菜单特效
第9章层的应用
第10章表格的控制
第1章网页特效
在万维网刚被发明的初期，网页只是一个静态的、可以呈现文字的页面而已。

但是，随着互联网的发展，人们对网页的美观和动态性要求越来越高，因此，网页就需要变得更有互动性，能更好地满足人们的视觉需要。

所以，现在大多数的网站都采用了各式各样的网页特效来提高网页的可读性和用户体验感。

本章介绍了用JavaScript实现的多种网页特效，读者可以从中学到网页特效的一些技巧。

实例001 自动刷新页面
【实例描述】
有一些具有实效特点的网页，譬如股票价格、外汇牌价等，有这样的用户需求：定时地自动刷新网页，把最新数据展示给用户。

那么这样的效果如何实现呢？JavaScript里有一个reload()函数可以实现这样的效果。

【实现代码】
<script< p="">
type="text/javascript">
//刷新网页的函数
fresh(){
function
window.location.reload();
//调用location的reload函数
}
setTimeout('fresh()',10000); //设置timeout，10秒钟刷新一次</script<>。

JavaScript实现烟花特效（面向对象）

JavaScript实现烟花特效（⾯向对象）本⽂实例为⼤家分享了JavaScript实现烟花特效的具体代码，供⼤家参考，具体内容如下本特效使⽤⾯向对象编程分析OOA点击触发事件烟花运动分成两个阶段向上飞爆炸OODclass FireWork{constructor(){}bindEvent(){let _this = this;ele.onclick = function(){//fly结束再去调⽤boom函数_this.fly(_this.boom);}}fly(boom){}boom(){}}CSS设计实现CSS代码*{margin: 0;padding: 0;}#box{width:800px;height:600px;position: relative;margin: 100px auto;background:#000000;border:2px solid red;overflow: hidden;}.ball{width: 40px;height: 40px;border-radius: 50%;position: absolute;bottom: 0;}JS编程实现javascript代码<script src="./utils.js"></script><script>//class FireWork{constructor(){this.box = document.getElementById("box");this.box_offset = {left : box.offsetLeft,top : box.offsetTop}}bindEvent(){let _this = this;this.box.onclick = function( e ){e = e || event;_this.x = e.clientX - _this.box_offset.left;_this.y = e.clientY - _this.box_offset.top;_this.fly(_this.boom);}}fly( boom ){let ele = this.createEle();let _this = this;// 放⼊box之中;ele.style.left = this.x + "px";let _left = this.x ;let _top = this.y ;animate( ele , {top : this.y} , function(){ele.remove();_this.boom( _left , _top );});}boom( x , y ){let r = 100;let count = 0 ;let _this = this;for(let i = 0 ; i < 20 ; i ++){let ele = this.createEle();ele.style.left = x +"px";ele.style.top = y + "px";let _left = parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;let _top = parseInt(Math.sin( Math.PI / 10 * i ) * r) + yanimate( ele , {left : _left,top : _top,opacity : 0} , function(){ele.remove();})}}createEle(){let ele = document.createElement("div");ele.className = "ball";ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`; this.box.appendChild( ele );return ele ;}}new FireWork().bindEvent();</script>引⽤的utils.js⽂件function on(dom, event_name, handler_selector, delegation_handler) {if( typeof handler_selector === "string" && typeof delegation_handler === "function"){return delegation(dom, event_name, handler_selector, delegation_handler);}// 在dom对象⾥⾯建⽴⼀个事件名 : 事件处理函数对应的数组;// 判定当前事件处理函数是否在dom对象之中;var event_type = "_" + event_name;if (event_type in dom) {dom[event_type].push(handler_selector);} else {dom[event_type] = [handler_selector];}// 如果直接⽤事件名当成对象之中的key值，那么会和原有的dom功能名称冲突;// 因为特殊的事件名会导致事件⽆法触发，所以我们在这⾥要对事件名进⾏拆分处理; dom.addEventListener(event_name.split(".")[0], handler_selector)}function off(dom, event_name) {// 获取到dom对象⾥⾯事件名对应的⼀组事件处理函数;var callback_list = dom["_" + event_name];// 根据列表⾥⾯的所有函数进⾏事件移除 ;callback_list.forEach(function (event_handler) {dom.removeEventListener(event_name.split(".")[0], event_handler);})// 清空dom对象⾥⾯的事件处理函数组;dom["_" + event_name].length = 0;}function trigger(dom, event_type) {dom.dispatchEvent(new Event(event_type));}function delegation(dom, event_name, selector, event_handler) {dom.addEventListener(event_name, function (e) {e = e || event;var target = e.target || e.srcElement;while (target !== dom) {switch (selector[0]) {case ".":if (selector.slice(1) === target.className) {event_handler.call(target , e )return;}case "#":if (selector.slice(1) === target.id) {event_handler.call(target, e)return;}default:if (selector.toUpperCase() === target.nodeName) {event_handler.call(target, e)return;}}target = target.parentNode;}})}function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){// transition : 有两种动画⽅式 "buffer" , "liner"var _style = getComputedStyle( dom );// - 1. 数据变形 ;for(var attr in attrs ){attrs[attr] = {target : attrs[attr],now : _style[attr]}// - 2. 速度 : 匀速运动速度正负 ;if( transition === "liner" ){attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;}if( attr === "opacity"){attrs[attr].target *= 100attrs[attr].now *= 100}else{attrs[attr].now = parseInt(attrs[attr].now)}}// - 关闭开启定时器;clearInterval( dom.interval );dom.interval = setInterval( function(){for(var attr in attrs ){// 取出当前值和属性值 ;// attrs[attr].target : ⽬标值;// attrs[attr].now : 当前值;let { target , now } = attrs[attr];// 缓冲运动时候的速度;if( transition === "buffer" ){var speed = (target - now ) / 10 ;speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );}else if(transition === "liner"){var speed = attrs[attr].speed;}if( Math.abs(target - now) <= Math.abs( speed ) ){if( attr === "opacity"){dom.style[attr] = target / 100;}else{dom.style[attr] = target + "px";}delete attrs[attr];for(var attr in attrs ){// 如果有数据循环会执⾏⾄少⼀次;return false;}clearInterval(dom.interval);typeof callback === "function" ? callback() : "";}else{now += speed;if( attr === "opacity"){dom.style[attr] = now / 100;}else{dom.style[attr] = now + "px";}// 给对象赋值;attrs[attr].now = now;}}} , 30)}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript特效千例

JavaScript特效千例脚本说明：第一步:把如下代码加入区域中:<span id=liveclockstyle=position:absolute;left:250px;top:122px;; width: 109px; height: 15px></span> （这里可以调整时钟的方位。

调用脚本时去掉括号中内容）<SCRIPT language=javascript>\r\n\r\n'+'\r\n\r\n'+'<HEAD>\r\n\r\n<SCRIPTLANGUAGE="JavaScript">\r\n\r\n'+'\r\n<\/script>\r\n'+'<\/H'+'EAD>\r\n\r\n'+'\r\n\r\n'+'<BO'+'DY Onload="startclock()">\r\n\r\n'+'\r\n\r\n'+'<form name=dateform>距离'+m2+'/'+document.me.d.options[document.me.d.selectedI ndex].value+'/'+document.me.y.options[document.me.y.selectedIndex].v alue+'还有\n'+'<input type=text name=a size=2 value="">年\n'+'<input type=text name=b size=2 value="">月\n'+'<input type=text name=c size=2 value="">天\n'+'</fo'+'rm>\r\n\r\n'+'<'+'!-- 代码长度: 1.95 KB --'+'>';}document.mail.source.value=txt;document.mail.source2. value=txt;}//--></SCRIPT>第二步:把如下代码加入区域中：<center><table border=5 bordercolor=blackborderlight=green><tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面框中为脚本显示区</strong></font></td></tr><tr><td align=center><form name=me><p><select name=m size=1> <optionvalue=0>January </option> <optionvalue=1>February </option> <optionvalue=2>March </option> <optionvalue=3>April </option> <option value=4>May </option> <option value=5>June </option> <option value=6>July </option> <optionvalue=7>August </option> <optionvalue=8>September </option> <optionvalue=9>October </option> <optionvalue=10>November </option> <optionvalue=11>December </option> </select><select name=d size=1> <option value=1>1</option> <option value=2>2 </option><option value=3>3 </option> <optionvalue=4>4 </option> <option value=5>5</option> <option value=6>6 </option><option value=7>7 </option> <optionvalue=8>8 </option> <option value=9>9</option> <option value=10>10 </option> <option value=11>11 </option> <option value=12>12 </option> <option value=13>13 </option> <option value=14>14 </option> <option value=15>15 </option> <option value=16>16 </option> <option value=17>17 </option> <option value=18>18 </option> <option value=19>19 </option> <option value=20>20 </option> <option value=21>21 </option> <option value=22>22 </option> <option value=23>23 </option> <option value=24>24 </option> <option value=25>25 </option> <option value=26>26 </option><option value=27>27 </option> <optionvalue=28>28 </option> <option value=29>29 </option> <option value=30>30 </option><option value=31>31 </option></select><select name=y size=1> <option value=1999>1999 </option> <optionvalue=2000>2000 </option> <optionvalue=2001>2001 </option> <optionvalue=2002>2002 </option> <optionvalue=2003>2003 </option> <optionvalue=2004>2004 </option> <optionvalue=2005>2005 </option> <optionvalue=2006>2006 </option> <optionvalue=2007>2007 </option> <optionvalue=2008>2008 </option> <optionvalue=2009>2009 </option> </select><br> <input type=button onclick=generate() value=生成代码class=yk9><input type=button value=返回onClick=history.go(-1) name=buttonclass=yk9><p></p></form><formname=mail> <input type=hidden name=scriptname value="Countdown Creator"><input type=hiddenname=source2 value><table bgcolor=dedfdf border=1 cellpadding=1 width=396> <tr> <td align=center height=218><textarea name=source rows=12 cols=55 class=yk9></textarea><br> <br></td> <td> </td> </tr></table></form></td></tr></table> 八种风格的时间日期脚本说明:第一步:把如下代码加入<head>区域中<SCRIPT language=javascriptauthor=luxiaoqing></SCRIPT>第二步:把如下代码加入区域中<SCRIPT language=javascript></SCRIPT>显示登陆时间脚本说明:把如下代码加入<body>区域中<form name=forms> <fontsize=3><CENTER><divalign=center><p></font><font color=red size=3>您在本站逗留了</font><fontcolor=#80FF80><br> <input type=textname=input1size=10></font></p></div></center></font><SCRIPT language=javascript></SCRIPT></form>日历生成器脚本说明：第一步:把如下代码加入<head>区域中:<SCRIPT LANGUAGE="JavaScript"></script>第二步:把如下代码加入<body>区域中:<script language="JavaScript" for=windowevent=onload></script><form name="frmCalendarSample" method="post" action=""><input type="hidden" name="calSelectedDate"value=""><table border="1"><tr><td><select name="tbSelMonth"onchange='fUpdateCal(frmCalendarSample.tbSelYear.val ue, frmCalendarSample.tbSelMonth.value)'><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select><select name="tbSelYear"onchange='fUpdateCal(frmCalendarSample.tbSelYear.val ue, frmCalendarSample.tbSelMonth.value)'><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option></select></td></tr><tr><td><script language="JavaScript">var dCurDate = new Date();fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);</script></td></tr></table></form>退出时显示访问时间脚本说明:第一步：把如下代码加入<body>区域中<SCRIPT LANGUAGE="Javascript"> </SCRIPT>第二步：把<body>区域改为<body onUnload="bye()">全中文日期显示脚本说明：把如下代码加入<body>区域中:<script language="JavaScript">function number(index1){var numberstring="一二三四五六七八九十";if(index1 ==0) {document.write("十")}if(index1 < 10){document.write(numberstring.substring(0+(index1-1),index 1))}else if(index1 < 20 ){document.write("十"+numberstring.substring(0+(index1-11),(index1-10)))} else if(index1 < 30 ){document.write("二十"+numberstring.substring(0+(index1-21),(index1-20)))}else{document.write("三十"+numberstring.substring(0+(index1-31),(index1-30)))} }var today1 = new Date()var month = today1.getMonth()+1var date = today1.getDate()var day = today1.getDay()document.write("公元二零零零年")number(month)document.write("月")number(date)document.write("日")</script>。

javaScript系列---【js动画特效--案例汇总】

javaScript系列---【js动画特效--案例汇总】案例1:⾃定义右击菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#menu {width: 200px;height: 217px;background: tomato;/* 添加定位 */position: absolute;/* 默认隐藏 */display: none;}li {list-style: none;width: 200px;height: 30px;border-bottom: 1px solid white;}li:hover {background: skyblue;}body {height: 2000px;}</style></head><body><div id="menu"><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Node.js</li><li>Vue</li><li>React</li><li>⼩程序</li></ul></div><script>var menu = document.getElementById('menu');// 右击事件,取消默认事件document.oncontextmenu = function (e) {// 获取⿏标的位置, 赋值给菜单的定位e = e || window.event;// console.log(e.clientX, e.clientY); // 相对于可视区// console.log(e.pageX, e.pageY); // 相对于页⾯menu.style.left = e.pageX + 'px';menu.style.top = e.pageY + 'px';// 让⾃定义菜单显⽰menu.style.display = 'block';// 取消默认事件(默认的右击菜单不显⽰)return false;}// 点击页⾯,隐藏⾃定义菜单document.onclick = function () {menu.style.display = 'none';}</script></body></html>案例2:键盘控制元素移动<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background: tomato;position: absolute;top: 300px;left: 300px;}</style></head><body><div id="box"></div><script>var box = document.getElementById('box');// 获取box的位置var l = parseInt(getStyle(box, 'left'));var t = parseInt(getStyle(box, 'top'));// console.log(l, t);// 监听键盘的按下document.onkeydown = function (e) {e = e || window.event;// console.log(e.keyCode);switch (e.keyCode) {case37:l--;break;case38:t--;break;case39:l++;break;case40:t++;break;}// 赋值box.style.left = l + 'px';box.style.top = t + 'px';}// 获取经过浏览器渲染的样式（⾏内样式内部样式外部样式）function getStyle(ele, attr) {return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]; }</script></body></html>案例3:根据滚轮控制元素⼤⼩<body><div class="box"></div><script>var box = document.querySelector('.box');var h = 300; // box的⾼度// Chromebox.onmousewheel = wheel;// firefoxbox.addEventListener('DOMMouseScroll', wheel);function wheel(e) {var direction; // 表⽰⽅向 1表⽰向下 -1表⽰向上e = e || window.event;if (e.wheelDelta) { // chromeif (e.wheelDelta > 0) {// console.log('chrome--up');direction = -1;} else {// console.log('chrome--down');direction = 1;}} else { // firefoxif (e.detail > 0) {// console.log('firefox--down');direction = 1;} else {// console.log('firefox--up');direction = -1;}}// 根据⽅向修改box的⼤⼩h += direction;box.style.height = h + 'px';}</script></body>案例4:拖拽元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background: tomato;position: absolute;top: 100px;left: 100px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><script>var box = document.querySelector('.box');var box1 = document.querySelector('.box1');drag(box);drag(box1);function drag(ele) {// ⿏标在box上按下ele.onmousedown = function (e) {e = e || window.event;// 按下瞬间,计算误差var deltaX = e.clientX - ele.offsetLeft;var deltaY = e.clientY - ele.offsetTop;// console.log(deltaX, deltaY);// ⿏标在页⾯上移动document.onmousemove = function (e) {e = e || window.event;// console.log(e.clientX, e.clientY);// 计算当前的位置var l = e.clientX - deltaX;var t = e.clientY - deltaY;// 验收,限制范围if (l <= 0) l = 0;if (t <= 0) t = 0;// 获取屏幕的宽⾼var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;if (l >= screenW - ele.offsetWidth) l = screenW - ele.offsetWidth;if (t >= screenH - ele.offsetHeight) t = screenH - ele.offsetHeight;// 赋值ele.style.left = l + 'px';ele.style.top = t + 'px';}}// ⿏标抬起, 取消移动事件document.onmouseup = function () {document.onmousemove = null;}}</script></body></html>案例5:碰撞检测<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background: orange;position: absolute;top: 200px;left: 200px;}.move {width: 100px;height: 100px;background: orange;position: absolute;top: 0;left: 0;}</style></head><body><div class="box">box</div><div class="move">move</div><script>var box = document.querySelector('.box');var move = document.querySelector('.move');// ⿏标在box上按下move.onmousedown = function (e) {e = e || window.event;// 按下瞬间,计算误差var deltaX = e.clientX - move.offsetLeft;var deltaY = e.clientY - move.offsetTop;// ⿏标在页⾯上移动document.onmousemove = function (e) {e = e || window.event;// 计算当前的位置var l = e.clientX - deltaX;var t = e.clientY - deltaY;// 验收,限制范围if (l <= 0) l = 0;if (t <= 0) t = 0;// 获取屏幕的宽⾼var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;if (l >= screenW - move.offsetWidth) l = screenW - move.offsetWidth;if (t >= screenH - move.offsetHeight) t = screenH - move.offsetHeight;// 赋值,移动move.style.left = l + 'px';move.style.top = t + 'px';// 移动的过程中进⾏判断碰撞if (move.offsetLeft + move.offsetWidth >= box.offsetLeft && move.offsetTop + move.offsetHeight >= box.offsetTop && box.offsetLeft + box.offsetWidth >= move.offsetLeft && box.offsetTop + box.offsetHeight >= move.offsetTop) move.style.background = 'blue';} else {move.style.background = 'orange';}}return false;}// ⿏标抬起, 取消移动事件document.onmouseup = function () {document.onmousemove = null;}</script></body></html>案例6:改变元素多个任意属性(透明度左/右等属性)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: blue;}</style></head><body><div class="box1"></div><script> //获取元素var box1 = document.querySelector('.box1');box1.onclick = function () {bufferMove(box1, { 'left': 500, 'top': 100 });}// 缓冲运动函数// ele: 元素 targetJson: ⽬标json值// 约定opacity在传参时⼿动放⼤100倍function bufferMove(ele, targetJson) {// 清除定时器clearInterval(ele.timer);// 把定时器作为⾃定属性绑定在元素上,多个不同元素之间不会相互影响ele.timer = setInterval(function () {// 假定已经到了终点(声明变量为true), 在forin中每次⾛完⼀步, 对当前位置进⾏判断, 如果有任意属性未到终点(变量变为false), 直到有⼀次全部都到达终点, 变量在forin执⾏完毕后仍为true, 停⽌定时器var tag = true;// 遍历targetJsonfor (var attr in targetJson) {if (attr == 'opacity') {// 获取元素当前透明度(放⼤100倍)var nowattr = parseInt(getStyle(ele, attr) * 100);} else {var nowattr = parseInt(getStyle(ele, attr));}// 计算步长: (⽬标值-当前值)/⽐例var step = (targetJson[attr] - nowattr) / 10;// 对步长进⾏判断,如果是正⽅向运⾏向上取整,如果是负⽅向运⾏向下取整step = step > 0 ? Math.ceil(step) : Math.floor(step);// console.log(step);// 加上步长nowattr += step;// 赋值if (attr == 'opacity') {// 赋值(透明度缩⼩100倍)ele.style[attr] = nowattr / 100;} else { ele.style[attr] = nowattr + 'px';}// 有属性未到终点,变量变成falseif (nowattr != targetJson[attr]) {tag = false;}}// 如果forin执⾏完毕tag仍未true,表⽰全部到达终点if (tag) {clearInterval(ele.timer);}}, 50);}// 获取计算后样式function getStyle(ele, attr) {return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : el e.currentStyle[attr];}</script></body></html>案例7:运动函数添加回调函数<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: blue;}</style></head><body><div class="box1"></div><script src="../ujiuye.js"></script><script>var box1 = document.querySelector('.box1');box1.onclick = function () {bufferMove(box1, { 'left': 500, 'top': 1 }, function () {box1.style.background = 'pink';});}</script></body></html>。

javascript特效19则

javascript特效19则.txt33学会宽容，意味着成长，秀木出木可吸纳更多的日月风华，舒展茁壮而更具成熟的力量。

耐力，是一种不显山石露水的执着；是一种不惧风不畏雨的坚忍；是一种不图名不图利的忠诚。

主页javascript特效19则1 不让页面嵌套在其他框架结构里如果你不想让你的页面被嵌套在其他框架结构里，你可以在你的页面相应位置加入下面几行代码即可。

（此处略去相应位置其它HTML代码）< head > < script language="javascript" > if(self!=top){top.location=self.location;} < /script > < /head >2 不让页面脱离相应的框架结构如果你不想让你的页面脱离相应的框架结构，也只要在相应页面中加入下面代码。

（此处同样略去相应位置其它HTML代码）< head > < script language="javascript" > if(self==top){self.location.href="url";} < /script > < /head >---- 这里的url应该设置成你网页中定义相应框架结构的页面地址。

3 在新的窗口中打开页面你还可以设置在新的窗口中打开你的页面，而不是用你的页面替换原有页面。

window.open("url","windowName","windowFeatures")4 让网页具备浏览器识别适应功能让网页具备浏览器识别适应功能---- 随着网络的技术发展，动态网页已被Netscape和Microsoft分别引入应用，但在标准应用中有相当大的分歧，往往必须分别为它们俩分别编写不同的H TML页面，同时兼顾不支持动态网页的浏览器。

JS+CSS实现的漂亮渐变背景特效代码（6个渐变效果）

JS+CSS实现的漂亮渐变背景特效代码（6个渐变效果）本⽂实例讲述了JS+CSS实现的漂亮渐变背景特效代码。

分享给⼤家供⼤家参考，具体如下：运⾏效果截图如下：具体代码如下：<html><head><title>JS配合CSS实现的漂亮渐变背景特效6个实例</title><script>var setGradient = (function() {var p_dCanvas = document.createElement('canvas');var p_useCanvas = !!(typeof(p_dCanvas.getContext) == 'function');var p_dCtx = p_useCanvas ? p_dCanvas.getContext('2d') : null;var p_isIE =/*@cc_on!@*/false;try {p_dCtx.canvas.toDataURL()} catch(err) {p_useCanvas = false;};if (p_useCanvas) {return function(dEl, sColor1, sColor2, bRepeatY) {if (typeof(dEl) == 'string') dEl = document.getElementById(dEl);if (!dEl) return false;var nW = dEl.offsetWidth;var nH = dEl.offsetHeight;p_dCanvas.width = nW;p_dCanvas.height = nH;var dGradient;var sRepeat;if (bRepeatY) {dGradient = p_dCtx.createLinearGradient(0, 0, nW, 0);sRepeat = 'repeat-y';} else {dGradient = p_dCtx.createLinearGradient(0, 0, 0, nH);sRepeat = 'repeat-x';}dGradient.addColorStop(0, sColor1);dGradient.addColorStop(1, sColor2);p_dCtx.fillStyle = dGradient;p_dCtx.fillRect(0, 0, nW, nH);var sDataUrl = p_dCtx.canvas.toDataURL('image/png');with(dEl.style) {backgroundRepeat = sRepeat;backgroundImage = 'url(' + sDataUrl + ')';backgroundColor = sColor2;};}} else if (p_isIE) {p_dCanvas = p_useCanvas = p_dCtx = null;return function(dEl, sColor1, sColor2, bRepeatY) {if (typeof(dEl) == 'string') dEl = document.getElementById(dEl);if (!dEl) return false;dEl.style.zoom = 1;var sF = dEl.currentStyle.filter;dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +( !! bRepeatY), ',enabled=true,startColorstr=', sColor1, ', endColorstr=', sColor2, ')'].join(''); };} else {p_dCanvas = p_useCanvas = p_dCtx = null;return function(dEl, sColor1, sColor2) {if (typeof(dEl) == 'string') dEl = document.getElementById(dEl);if (!dEl) return false;with(dEl.style) {backgroundColor = sColor2;};}}})();</script><style>body{font:0.75em/1.4 Arial;text-align:left;margin:20px;} hr{clear:both;visibility:hidden;}xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid1px #ccc;} div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left;display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2"Tahoma";text-align:justify;}</style><body><div id="example1" class="example">CSS特效代码。

JavaScript实现的简单烟花特效代码

JavaScript实现的简单烟花特效代码本⽂实例讲述了JavaScript实现的简单烟花特效代码。

分享给⼤家供⼤家参考，具体如下：这是⼀款JavaScript烟花特效，过年的时候放到你的⽹页上祝贺⼤家⽜年⼤吉吧，是不是很不错？运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>礼花特效</title><style type="text/css">html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}.ball{color:#FF0000; position:absolute; font-size:16px;}.star{color:#FF0000; position:absolute; font-size:4px;}</style><script type="text/javascript">function Fireworks(sky, loop){this.sky = sky;this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;this.x = this.y = 0;this.step = 20;this.delay = 30;this.stars = [];this.r = 10;this.step2 = 7;this.radius = 90;this.angle = 45;this.num = 16;this.loop = loop;this.degree = 2;this.t = 0;this.delt = 0;this.max = 30;this.cur = 1;this.points = null;}Fireworks.prototype = {init : function(){this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;this.y = this.skyHeight;this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;},setOpacity : function(obj, p){if(p > 85){var opacity = 100 - (p - 85) * 4;if(document.all){obj.style.filter = "alpha(opacity=" + opacity + ")";}else{obj.style.MozOpacity = opacity / 100;}}},getNextPoint : function(degree, coeff, t){var tt = 1.0 - t;for(var rr = 1; rr <= degree; rr++){for(var i=0; i <= degree-rr; i++){coeff[i] = tt * coeff[i] + t * coeff[i+1];}}return coeff[0];},showBall : function(){this.ball = document.createElement("div");this.ball.innerHTML = "●";this.ball.className = "ball";this.ball.style.left = this.x + "px";this.ball.style.top = this.y + "px";this.sky.appendChild(this.ball);},moveBall : function(){var self = this;if(this.y > this._y){var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);this.y -= (this.step - p * 1.6);this.ball.style.fontSize = 16 - p + "px";this.ball.style.top = this.y + "px";setTimeout(function(){self.moveBall();}, this.delay);}else{this.fire();}},hideBall : function(){this.sky.removeChild(this.ball);this.ball = null;},showStars : function(){var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00']; var n = cs = parseInt(Math.random() * colors.length / 2);var cc = parseInt(Math.random() * colors.length / 2);var colorMode = parseInt(Math.random() * 2);var star = Math.round(Math.random()) == 1 ? "★" : "☆";this.r = 10;this.radius = Math.round(Math.random() * 30) + 60;this.num = Math.round(Math.random() * 5 + 5) * 2;this.angle = 180 / this.num * 2;for(var i=1; i<=this.num; i++){this.stars[i] = document.createElement("div");this.stars[i].innerHTML = star;this.stars[i].className = "star";if(colorMode == 1){this.stars[i].style.color = colors[n];if(++n > cs + cc)n = cs;}else{this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];}this.sky.appendChild(this.stars[i]);}},moveStars : function(){var self = this;if(this.r < this.radius){var p = this.step2 - parseInt(this.r / this.radius * 5);p = p < 1 ? 1 : p;this.r += p;p = parseInt(this.r / this.radius * 100);for(var i=1; i<=this.num; i++){this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";this.stars[i].style.fontSize = 4 + p/10 + "px";this.setOpacity(this.stars[i], p);}setTimeout(function(){self.moveStars();}, this.delay);}else{setTimeout(function(){self.hideStars();}, 200 * Math.random());}},initBezier : function(){var coeff_x = [];var coeff_y = [];this.points = [];this.t = 0;this.delt = 1.0 / this.max;this.cur = 1;var a = parseInt(Math.random() * 5) * 90;coeff_x[0] = this.x;coeff_y[0] = this.y;for(var i=1; i<=this.num; i++){coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius; this.points[(i-1)*2] = coeff_x.slice(0);this.points[(i-1)*2+1] = coeff_y.slice(0);}},moveStars2 : function(){var self = this;if(this.cur < this.max){this.t += this.delt;this.cur++;p = parseInt(this.cur / this.max * 100);for(var i=1; i<=this.num; i++){this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px"; this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px"; this.stars[i].style.fontSize = 4 + p/10 + "px";this.setOpacity(this.stars[i], p);}setTimeout(function(){self.moveStars2();}, this.delay);}else{setTimeout(function(){self.hideStars();}, 200 * Math.random());}},hideStars : function(){for(var i=1; i<=this.num; i++){this.sky.removeChild(this.stars[i]);this.stars[i] = null;if(this.points != null){delete this.points[(i-1)*2];delete this.points[(i-1)*2+1];}}if(this.points){delete this.points;}this.points = null;if(this.loop){this.play();}},fire : function(){this.hideBall();this.showStars();var effect = parseInt(Math.random() * 2) + 1;switch(effect){case 1:this.moveStars();break;case 2:this.initBezier();this.moveStars2();break;}},play : function(){this.init();this.showBall();this.moveBall();}};window.onload = function(){for(var i=0; i<5; i++)new Fireworks(document.body, true).play();};</script></head><body></body></html>希望本⽂所述对⼤家JavaScript程序设计有所帮助。

js实现烟花特效

js实现烟花特效本⽂实例为⼤家分享了js实现烟花特效的具体代码，供⼤家参考，具体内容如下1.概述在⽹页背景中实现⿏标点击出现模拟烟花爆炸的特效2.思路1.获取⿏标点击位置，底端创建烟花节点。

2.为烟花添加css属性，烟花节点从下⾄上运动。

3.运动⾄⿏标位置时移除烟花节点，同时⽣成多个烟花碎⽚。

4.为不同的烟花碎⽚随机⽣成不同的颜⾊、运动速度、运动⽅向。

5.烟花碎⽚超出屏幕显⽰部分时移除。

3.代码部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;background-color: black;overflow: hidden;}</style></head><body><script src="move.js"></script><script>class Firework {constructor(x, y) {//x,y⿏标的位置this.x = x;//将⽔平位置赋值给this.x属性。

this.y = y;//将垂直位置赋值给this.y属性。

this.ch = document.documentElement.clientHeight;//可视区的⾼度}init() {//1.创建烟花节点。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

</div><div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div><div id="board3">1.程序员与小姐的10个相同。

<br />2.中国的程序员与中国的足球？</div> <div id="board4">1.二十一世纪最缺的是什么?人才<br /><a href="" target="_blank"></a><a href="" target="_blank"></a></div><p>查找更多代码，请访问：懒人图库</p><html xmlns="/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css下拉菜单演示</title><style type="text/css"></style><script type=text/javascript><![CDA TA[//><!]]></script></head><body><ul id="nav"><li><a href="#">产品介绍</a><ul><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li><li><a href="#">产品一</a></li></ul></li><li><a href="#">服务介绍</a><ul><li><a href="#">服务二</a></li><li><a href="#">服务二</a></li><li><a href="#">服务二</a></li><li><a href="#">服务二服务二</a></li><li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li></ul></li><li><a href="#">成功案例</a><ul><li><a href="#">案例三</a></li><li><a href="#">案例</a></li><li><a href="#">案例三案例三</a></li><li><a href="#">案例三案例三案例三</a></li> </ul></li><li><a href="#">关于我们</a><ul><li><a href="#">我们四</a></li><li><a href="#">我们四</a></li><li><a href="#">我们四</a></li><li><a href="#">我们四111</a></li></ul></li><li><a href="#">在线演示</a><ul><li><a href="#">演示</a></li><li><a href="#">演示</a></li><li><a href="#">演示</a></li><li><a href="#">演示演示演示</a></li><li><a href="#">演示演示演示</a></li><li><a href="#">演示演示</a></li><li><a href="#">演示演示演示</a></li><li><a href="#">演示演示演示演示演示</a></li> </ul></li><li><a href="#">联系我们</a><ul><li><a href="#">联系联系联系联系联系</a></li><li><a href="#">联系联系联系</a></li><li><a href="#">联系</a></li><li><a href="#">联系联系</a></li><li><a href="#">联系联系</a></li><li><a href="#">联系联系联系</a></li><li><a href="#">联系联系联系</a></li></ul></li></ul><p>查找更多代码，请访问：<a href="" target="_blank">懒人图库</a></p></body></html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Copyright" content="懒人图库/" /><meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" /> <meta content="懒人图库" name="keywords" /><title>懒人图库</title></head><body><style type="text/css">#vertmenu {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 100%;width: 160px;padding: 0px;margin: 0px;}#vertmenu h1 {display: block;background-color:#FF9900;font-size: 90%;padding: 3px 0 5px 3px;border: 1px solid #000000;color: #333333;margin: 0px;width:159px;}#vertmenu ul {list-style: none;margin: 0px;padding: 0px;border: none;}#vertmenu ul li {margin: 0px;padding: 0px;}#vertmenu ul li a {font-size: 80%;display: block;border-bottom: 1px dashed #C39C4E;padding: 5px 0px 2px 4px;text-decoration: none;color: #666666;width:160px;}#vertmenu ul li a:hover, #vertmenu ul li a:focus {color: #000000;background-color: #eeeeee;}</style><div id="vertmenu"><h1>Navigation</h1><ul><li><a href="#" tabindex="1">Home</a></li><li><a href="#" tabindex="2">About Us</a></li><li><a href="#" tabindex="3">Computing</a></li><li><a href="#" tabindex="4">Web Sites</a></li><li><a href="#" tabindex="5">Games</a></li><li><a href="#" tabindex="6">Links</a></li></ul></div><p>查找更多代码，请访问：<a href="" target="_blank">懒人图库</a></p></body></html><script>var marqueeContent=new Array(); //滚动新闻marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">小泉称若自民党在议会选举中失败</a><br>';marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布什发表广播讲话</a><br>';marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">伊斯兰武装炸毁印控克什米尔铁路导致列车出轨</a><br>'; marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布雷默：即使抓住了萨达姆也难以结束抵抗行动</a><br>';var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量var marqueeId=0;var marqueeDelay=2000;var marqueeHeight=20;//接下来的是定义一些要使用到的函数function initMarquee() {var str=marqueeContent[0];document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])"onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</di v></div>');marqueeId++;marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);}function startMarquee() {var str=marqueeContent[marqueeId];marqueeId++;if(marqueeId>=marqueeContent.length) marqueeId=0;if(marqueeBox.childNodes.length==1) {var nextLine=document.createElement('DIV');nextLine.innerHTML=str;marqueeBox.appendChild(nextLine);}else {marqueeBox.childNodes[0].innerHTML=str;marqueeBox.appendChild(marqueeBox.childNodes[0]);marqueeBox.scrollTop=0;}clearInterval(marqueeInterval[1]);marqueeInterval[1]=setInterval("scrollMarquee()",20);}function scrollMarquee() {marqueeBox.scrollTop++;if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){clearInterval(marqueeInterval[1]);}}initMarquee();</script><p>查找更多代码，请访问：<a href="" target="_blank">懒人图库</a></p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>多行滚动jQuery循环新闻列表代码</title><style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}</style><script src="/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">//滚动插件(function($){$.fn.extend({Scroll:function(opt,callback){//参数初始化if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(), //获取行高line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）if(line==0) line=1;var upHeight=0-line*lineH;//滚动函数scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginTop:0});});}//鼠标事件绑定_this.hover(function(){clearInterval(timerID);},function(){timerID=setInterval("scrollUp()",timer);}).mouseout();}})})(jQuery);$(document).ready(function(){$("#scrollDiv").Scroll({line:4,speed:500,timer:1000});});</script></head><body><p>多行滚动演示：</p><div id="scrollDiv"><ul><li>这是公告标题的第一行</li><li>这是公告标题的第二行</li><li>这是公告标题的第三行</li><li>这是公告标题的第四行</li><li>这是公告标题的第五行</li><li>这是公告标题的第六行</li><li>这是公告标题的第七行</li><li>这是公告标题的第八行</li></ul></div></body></html>***请再次刷新查看效果，或保存到本地浏览***<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>给图片加上播放按钮-懒人图库</title><style>img {display:block}#imgBox li {position:relative;list-style-type:none;border:1px solid #ccc;padding:3px;float:left}.toolbar {position:absolute;bottom:15px; right:15px;}</style></head><body><ul id="imgBox"><li><a href="/" target="_blank"><img src="/down/js/images/12523103880.jpg" width="200" height="150" border="0" /></a><div class="toolbar"><a href="/" target="_blank"><img src="/down/js/images/12523103880.png" border="0"></a></div></li></ul><p>查找更多代码，请访问：<a href="" target="_blank">懒人图库</a></p></body></html>给图片加上播放按钮<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div><script type="text/javascript" >//缩放图片到合适大小function ResizeImages(){var myimg,oldwidth,oldheight;var maxwidth=550;var maxheight=880var imgs = document.getElementById('article').getElementsByTagName('img'); //如果你定义的id不是article，请修改此处for(i=0;i<imgs.length;i++){myimg = imgs[i];if(myimg.width > myimg.height){if(myimg.width > maxwidth){oldwidth = myimg.width;myimg.height = myimg.height * (maxwidth/oldwidth);myimg.width = maxwidth;}}else{if(myimg.height > maxheight){oldheight = myimg.height;myimg.width = myimg.width * (maxheight/oldheight);myimg.height = maxheight;}}}}//缩放图片到合适大小ResizeImages();</script><p>查找更多代码，请访问：<a href="" target="_blank">懒人图库</a></p>图片缩小---------------------------------------。

合集下载

如何在JavaScript中实现网页的动画和特效

js闪烁的星空特效源码

javascript刮刮卡特效代码

JS图片屏幕旋转特效代码

七个基于JavaScript实现的情人节表白特效

【JavaScript】Javascript特效代码大全

Javascript特效代码大全(420个)

Javascript特效代码大全(420个)

JavaScript网页特效经典300例

JavaScript实现烟花特效（面向对象）

JavaScript特效千例

javaScript系列---【js动画特效--案例汇总】

javascript特效19则

JS+CSS实现的漂亮渐变背景特效代码（6个渐变效果）

JavaScript实现的简单烟花特效代码

js实现烟花特效

文档推荐

最新文档