首页网站SEO运营js网页特效代码(js基础代码大全)

js网页特效代码(js基础代码大全)

编程之家2026-05-16646次浏览

各位老铁们好，相信很多人对js网页特效代码都不是特别的了解，因此呢，今天就来为大家分享下关于js网页特效代码以及js基础代码大全的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

js网页特效代码(js基础代码大全)

网页特效代码

在HTML文件中添加网页特效代码，一般有三种情况。

第一，只加在HTML文件头部，即HTML文件中<head>……</head>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。

第二，只加在HTML文件体部。即HTML文件中<body>……</body>之间的代码。这类代码只需要加在这个部分，即可达到预期的效果。如在你题目中提到的就属于这一类。

除上述情况外，多数代码需要先在头部（<head>……</head>之间）在上一些属性性质的代码，但是特效的主代码需要添加在体部（body>……</body>之间），否则，特效不能正常显示，有时还会出现错误，影响整个页面的正常显示。

添加特效代码的方法：

先要用HTML编辑软件，如常见的文本编辑器“记事本”，打开需要编辑的文件，根据特效代码的要求，在文件中找到相应位置，复制，粘贴特效代码，保存即可。修改完毕后，即可在浏览器中看到相应的效果。

js网页特效代码(js基础代码大全)

在添加的时候一定要注意，一定要按照特效源码的要求添加，此外，还要保证源码的完整性，一个标点符号都不能少，也不能多。

另外要说的是，根据我的经验，直接从网上复制来的代码，不一定都能直接粘贴了用，一部分必须通过一个软件来中转。比如，先把网上的代码复制后，粘贴到“记事本”中，然后再复制、粘贴到相应的文件位置上。

最后，介绍你几个经典网页特效站。

1、网页特效集锦：

2、javascript网页特效：

3、万旭网页特效：

js网页特效代码(js基础代码大全)

4、网页特效梦工厂：

5、网页制作大宝库网页特效大全：

谁能告诉我一些有用的网页特效代码啊

常用JS代码集锦层的隐藏与显示

只要设置style的display属性即可

比如<div style="display:none" id="MyDiv">隐藏的层</div>

如果要显示它可以通过脚本来控制

window.document.getElementById("MyDiv").style.display="";

禁止右键

<body oncontextmenu="return false">

屏蔽页面中程序运行出错信息

window.onerror= function()

{

return true;

}

得到当前显示器的分辨率

window.srceen.width得到屏幕的宽度

window.srceen.height得到屏幕的高度

如果当前分辨率为800*600，window.srceen.width是800，window.srceen.height是600

定时运行特定代码

setTimeout(Code,Timeout);

setInterval(Code,Timeout);

Code是一段字符串，里边是js代码，Timeout是时间间隔，单位是微秒

setTimeout是从现在算起多少微秒后运行该代码（只运行一次）

setInterval是每隔多少微秒运行一次代码

得到本页网址

var Url= window.location.href;

保存当前页面的内容

document.execCommand("SaveAs","","C:\\index.htm");

隐去浏览器中当鼠标移到图片上跳出的工具栏

<img galleryimg="no">

或者

<head>

<meta http-equiv="imagetoolbar" content="no">

</head>

■打开■

<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

■另存为■

<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

■属性■

<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

■打印■

<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

■页面设置■

<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

■刷新■

<input type=button value=刷新 name=refresh onclick="window.location.reload()">

■导入收藏■

<input type="button" name="Button" value="导入收藏夹" onClick=window.external.ImportExportFavorites(true,);>

■导出收藏■

<input type="button" name="Button3" value="导出收藏夹" onClick=window.external.ImportExportFavorites(false,);>

■加入收藏■

<INPUT name=Button2 onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹>

■整理收藏夹■

<INPUT name=Submit2 onclick="window.external.ShowBrowserUI(OrganizeFavorites, null)" type=button value=整理收藏夹>

■查看原文件■

<INPUT name=Button onclick=window.location="view-source:"+ window.location.href type=button value=查看源文件>

■语言设置■

<INPUT name=Button onclick="window.external.ShowBrowserUI(LanguageDialog, null)" type=button value=语言设置>

■前进■

<INPUT name=Submit onclick=history.go(1) type=submit value=前进>

■后退■

<INPUT name=Submit2 onclick=history.go(-1) type=submit value=后退>

急求各种网页鼠标特效代码(只要代码,不要网址)

很酷的跟随鼠标的三色彩带

html>

<head>

<title>网页特效|Linkweb.cn/Js|---很酷的跟随鼠标的三色彩带</title>

</head><body bgColor=#000000>

<!--将以下代码加入HTML的<Body></Body>之间-->

<script language="JavaScript">

<!--

var a_Colour='fff000';

var b_Colour='00ff00';

var c_Colour='ff00ff';

var Size=120;

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;

if(document.layers){

window.captureEvents(Event.MOUSEMOVE);

function nsMouse(evnt){

xpos= window.pageYOffset+evnt.pageX+6;

ypos= window.pageYOffset+evnt.pageY+16;

}

window.onMouseMove= nsMouse;

}

else if(document.all)

{

function ieMouse(){

xpos= document.body.scrollLeft+event.x+6;

ypos= document.body.scrollTop+event.y+16;

}

document.onmousemove= ieMouse;

}

function swirl(){

for(i= 0; i< 3; i++)

{

YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);

XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);

}

ThisStep+=step;

setTimeout('swirl()',10);

}

var amount=10;

if(document.layers){

for(i= 0; i< amount; i++)

{

document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');

document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');

document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');

}

}

else if(document.all){

document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'

+'<div id="IDiv" style="position:relative">');

for(i= 0; i< amount; i++)

{

document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');

document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');

document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');

}

document.write('</div></div>');

}

function prepos(){

var ntscp=document.layers;

var msie=document.all;

if(document.layers){

for(i= 0; i< amount; i++)

{

if(i< amount-1)

{

ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;

ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;

ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;

}

else

{

ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];

ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];

ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];

}

}

}

else if(document.all){

for(i= 0; i< amount; i++)

{

if(i< amount-1)

{

msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;

msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;

msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;

}

else

{

msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];

msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];

msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];

}

}

}

setTimeout("prepos()",10);

}

function Start(){

swirl(),prepos()

}

window.onload=Start;

//-->

</script>

</body></html>

跟随鼠标很逼真的弹性小球

<html>

<head>

<title>网页特效|Linkweb.cn/Js|---跟随鼠标很逼真的弹性小球</title>

</head><body>

<!--将以下代码加入HTML的<Body></Body>之间-->

<DIV id=dot0

style="HEIGHT: 16; POSITION: absolute; VISIBILITY: hidden; WIDTH: 11; left:10; top:15"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot1 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot2 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot3 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot4 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot5 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<DIV id=dot6 style="HEIGHT: 16; POSITION: absolute; WIDTH: 11; left:10; top:15"><IMG

height=11 src="images/bullet.gif" width=11></DIV>

<SCRIPT language=JavaScript>

var nDots= 7;

var Xpos= 0;

var Ypos= 0;

var DELTAT=.01;

var SEGLEN= 10;

var SPRINGK= 10;

var MASS= 1;

var XGRAVITY= 0;

var YGRAVITY= 50;

var RESISTANCE= 10;

var STOPVEL= 0.1;

var STOPACC= 0.1;

var DOTSIZE= 11;

var BOUNCE= 0.75;

var isNetscape= navigator.appName=="Netscape";

var followmouse= true;

var dots= new Array();

init();

function init()

{

var i= 0;

for(i= 0; i< nDots; i++){

dots[i]= new dot(i);

}

if(!isNetscape){

}

for(i= 0; i< nDots; i++){

dots[i].obj.left= dots[i].X;

dots[i].obj.top= dots[i].Y;

}

if(isNetscape){

startanimate();

} else{

setTimeout("startanimate()", 1000);

}

}

function dot(i)

{

this.X= Xpos;

this.Y= Ypos;

this.dx= 0;

this.dy= 0;

if(isNetscape){

this.obj= eval("document.dot"+ i);

} else{

this.obj= eval("dot"+ i+".style");

}

}

function startanimate(){

setInterval("animate()", 20);

}

function setInitPositions(dots)

{

var startloc= document.all.tags("LI");

var i= 0;

for(i= 0; i< startloc.length&& i<(nDots- 1); i++){

dots[i+1].X= startloc[i].offsetLeft

startloc[i].offsetParent.offsetLeft- DOTSIZE;

dots[i+1].Y= startloc[i].offsetTop+

startloc[i].offsetParent.offsetTop+ 2*DOTSIZE;

}

dots[0].X= dots[1].X;

dots[0].Y= dots[1].Y- SEGLEN;

}

function MoveHandler(e)

{

Xpos= e.pageX;

Ypos= e.pageY;

return true;

}

function MoveHandlerIE(){

Xpos= window.event.x+ document.body.scrollLeft;

Ypos= window.event.y+ document.body.scrollTop;

}

if(isNetscape){

document.captureEvents(Event.MOUSEMOVE);

document.onMouseMove= MoveHandler;

} else{

document.onmousemove= MoveHandlerIE;

}

function vec(X, Y)

{

this.X= X;

this.Y= Y;

}

function springForce(i, j, spring)

{

var dx=(dots[i].X- dots[j].X);

var dy=(dots[i].Y- dots[j].Y);

var len= Math.sqrt(dx*dx+ dy*dy);

if(len> SEGLEN){

var springF= SPRINGK*(len- SEGLEN);

spring.X+=(dx/ len)* springF;

spring.Y+=(dy/ len)* springF;

}

}

function animate(){

var start= 0;

if(followmouse){

dots[0].X= Xpos;

dots[0].Y= Ypos;

start= 1;

}

for(i= start; i< nDots; i++){

var spring= new vec(0, 0);

if(i> 0){

springForce(i-1, i, spring);

}

if(i<(nDots- 1)){

springForce(i+1, i, spring);

}

var resist= new vec(-dots[i].dx* RESISTANCE,

-dots[i].dy* RESISTANCE);

var accel= new vec((spring.X+ resist.X)/MASS+ XGRAVITY,

(spring.Y+ resist.Y)/ MASS+ YGRAVITY);

dots[i].dx+=(DELTAT* accel.X);

dots[i].dy+=(DELTAT* accel.Y);

if(Math.abs(dots[i].dx)< STOPVEL&&

Math.abs(dots[i].dy)< STOPVEL&&

Math.abs(accel.X)< STOPACC&&

Math.abs(accel.Y)< STOPACC){

dots[i].dx= 0;

dots[i].dy= 0;

}

dots[i].X+= dots[i].dx;

dots[i].Y+= dots[i].dy;

var height, width;

if(isNetscape){

height= window.innerHeight+ window.pageYOffset;

width= window.innerWidth+ window.pageXOffset;

} else{

height= document.body.clientHeight+ document.body.scrollTop;

width= document.body.clientWidth+ document.body.scrollLeft;

}

if(dots[i].Y>= height- DOTSIZE- 1){

if(dots[i].dy> 0){

dots[i].dy= BOUNCE*-dots[i].dy;

}

dots[i].Y= height- DOTSIZE- 1;

}

if(dots[i].X>= width- DOTSIZE){

if(dots[i].dx> 0){

dots[i].dx= BOUNCE*-dots[i].dx;

}

dots[i].X= width- DOTSIZE- 1;

}

if(dots[i].X< 0){

if(dots[i].dx< 0){

dots[i].dx= BOUNCE*-dots[i].dx;

}

dots[i].X= 0;

}

dots[i].obj.left= dots[i].X;

dots[i].obj.top= dots[i].Y;

}

}

</SCRIPT>

</body></html>

这里太小了放不了那么多

里面有很多的不想链接的话就看那两个吧

关于js网页特效代码的内容到此结束，希望对大家有所帮助。

ai代码生成器 ai编程软件js 数组排序(JavaScript数组排序算法)
↑