各位老铁们，大家好，今天由我来为大家分享网页鼠标特效代码，以及网页鼠标特效代码怎么写的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
在这个信息爆炸的时代，网站已经成为人们获取信息、娱乐和社交的重要平台。一个优秀的网站不仅能提供优质的内容，还能通过精美的设计和有趣的互动效果吸引访客，提升用户体验。而网页鼠标特效代码，正是实现这一目标的重要手段。本文将为您详细介绍网页鼠标特效代码的应用、实现方法以及注意事项，帮助您打造一个充满活力的网站。
一、网页鼠标特效代码的应用场景
1. 吸引用户注意力：通过独特的鼠标特效，可以吸引用户的注意力，让他们在众多网站中脱颖而出。
2. 提升用户体验：丰富的鼠标特效可以让用户在浏览网站时感受到更多的乐趣，从而提升用户体验。
3. 增强品牌形象：个性化的鼠标特效可以展现网站的特色，增强品牌形象。
4. 优化页面布局：合理运用鼠标特效，可以优化页面布局，使页面更加美观大方。
二、网页鼠标特效代码的实现方法
1. CSS3动画：
CSS3动画是一种简单、高效的实现鼠标特效的方法。以下是一个简单的CSS3动画示例：
“`css
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s ease;
}
.box:hover {
transform: scale(1.2);
}
“`
在上述代码中，当鼠标悬停在`.box`元素上时，它会放大1.2倍。
2. JavaScript动画：
JavaScript动画可以实现更复杂的鼠标特效。以下是一个使用JavaScript实现鼠标跟随效果的示例：
“`html
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代码集锦层的隐藏与显示
只要设置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=后退>
求一个网页特效的代码
给你两种代码，自己选择。第一种要等全部文字消失后才开始下一轮的滚动，第二种是无缝滚动，也就是还没等最后一句消失，下一次滚动已经开始。新闻链接的滚动大部分都是采取第二种。代码中出现的＃号表示链接地址。其余参数自行调整。
<MARQUEE onmouseover=this.stop() onmouseout=this.start() style=”LEFT: 0px; POSITION: absolute; line-height:20px;TOP=100px;” scrollAmount=2direction=up height=120 width=200><font color=#B0D8DC size=2><center><a href=”#”>你在做什么</a><br>
<br>
<a href=”#”>我在仰望天空</a><br>
<br>
<a href=”#”>30度仰望是什么</a><br>
<br>
<a href=”#”>是我想念她的角度</a><br>
<br>
<a href=”#”>为什么要把头抬到30度</a><br>
<br>
<a href=”#”>为了不让我的眼泪掉下来</a><br></MARQUEE>
二、文字向上无缝滚动
<div id=marquees style=”height=100px;LEFT: 60px; POSITION: absolute; TOP: 100px;”><font style=”font-family:宋体; color:white; font-size:14px;line-height=15px”>
<a href=”#”>你在做什么</a><br>
<br>
<a href=”#”>我在仰望天空</a><br>
<br>
<a href=”#”>30度仰望是什么</a><br>
<br>
<a href=”#”>是我想念她的角度</a><br>
<br>
<a href=”#”>为什么要把头抬到30度</a><br>
<br>
<a href=”#”>为了不让我的眼泪掉下来</a><br>
<br>
<br>
<br>
</div>
<script language=”JavaScript”>
marqueesHeight=100;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX=”visible”;
style.overflowY=”hidden”;
noWrap=true;
onmouseover=new Function(“stopscroll=true”);
onmouseout=new Function(“stopscroll=false”);
}
document.write('<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML=””;
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval(“scrollup()”,30);
}
document.body.onload=init;
function scrollup(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
好了，文章到此结束，希望可以帮助到大家。
