JS特效代码

合集下载

如何在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个)

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>图片缩小---------------------------------------。