鼠标跟随特效代码，鼠标拖尾特效怎么设置
其实鼠标跟随特效代码的问题并不复杂，但是又很多的朋友都不太了解鼠标拖尾特效怎么设置，因此呢，今天小编就来为大家分享鼠标跟随特效代码的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
急求各种网页鼠标特效代码(只要代码,不要网址)
很酷的跟随鼠标的三色彩带
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>
这里太小了放不了那么多
里面有很多的不想链接的话就看那两个吧
优质的鼠标移动网页特效素材推荐,不容错过!
优质的鼠标移动网页特效素材推荐
在网页设计中，鼠标移动特效能够显著提升用户体验，使网页更加生动有趣。以下是一些不容错过的优质鼠标移动网页特效素材，这些素材均来自一个资源丰富且质量上乘的免费素材网站。
一、素材网站指引
要获取这些优质的鼠标移动网页特效素材，你可以访问该素材网站，并按照以下步骤操作：
进入网站后，点击“平面”选项。在资源库中选择“网页特效”栏目。再点击“鼠标事件-鼠标移动”分类，即可找到丰富的鼠标移动特效素材。
二、特效素材推荐
HTML5 Canvas粒子发光动画特效
该特效利用HTML5 Canvas技术，实现粒子跟随鼠标移动并发光的效果，营造出一种神秘而迷人的氛围。
HTML5鼠标移动光束粒子动画特效
当鼠标在网页上移动时，会产生一束光束和跟随的粒子动画，效果非常酷炫，适合用于科技类网页。
HTML5 Canvas圆点视差动画特效
通过HTML5 Canvas技术实现的圆点视差动画，当鼠标移动时，圆点会产生视差效果，营造出一种动态立体感。
高质量自定义滚动条特效
该特效允许你自定义滚动条的样式和动画效果，当鼠标滚动时，滚动条会呈现出独特的视觉效果。
banner鼠标移动图片跟随滚动
在banner区域，当鼠标移动时，图片会跟随鼠标滚动，产生一种互动效果，非常适合用于展示类网页。
jQuery多层图片视觉差移动特效
利用jQuery技术实现的多层图片视觉差移动特效，当鼠标移动时，不同层的图片会以不同的速度移动，产生视觉差效果。
jQuery手机手指滑动切换图片特效
虽然这是针对手机端的特效，但在网页设计中也可以借鉴。当手指（或鼠标）在屏幕上滑动时，图片会切换，非常适合用于图片展示类网页。
jQuery鼠标经过星星显示特效
当鼠标经过某个区域时，会显示出星星动画效果，非常适合用于评价或点赞功能。
jQuery鼠标拖拽组织结构图代码
该特效允许用户通过鼠标拖拽来重新排列组织结构图，非常适合用于展示公司架构或流程图。
jQuery粒子动态背景特效
该特效利用粒子技术，实现动态背景效果。当鼠标移动时，背景中的粒子会随之变化，营造出一种梦幻般的氛围。
以上这些鼠标移动网页特效素材均来自一个资源丰富且质量上乘的免费素材网站，你可以根据自己的需求选择合适的特效来提升网页的视觉效果和用户体验。
鼠标跟随flash怎么弄
如果创建flash鼠标跟随特效模块，只有鼠标移到模块上才会用特效。
如果想要鼠标离开主页模块，在日志其他等里面有特效的话，那就只能使用QQ空间鼠标代码或者在QQ空间商城装扮鼠标了。
1、QQ空间免费鼠标代码：
javascript:window.top.space_addItem(4,4966,0,0,0,1,0);小绿人
javascript:window.top.space_addItem(4,5535,0,0,1,1,0);色狼
javascript:window.top.space_addItem(4,1151,0,0,0,1,0);老鹰
javascript:window.top.space_addItem(4,5837,0,0,1,1,0);蜡笔小新
QQ空间代码使用方法
2、在QQ空间商城装扮鼠标：
点击QQ空间右上方“装扮空间”→上方“装饰商城”→上面“饰品”→“鼠标”，在喜欢的鼠标特效上点一下即可装扮到QQ空间，最后点空间右上方“保存”。
商城物品一般非黄钻是无法免费保存的，你还可以到商城上的“免费”里面去找下有没有鼠标（免费区物品定期更新的）。
文章分享结束，鼠标跟随特效代码和鼠标拖尾特效怎么设置的答案你都知道了吗？欢迎再次光临本站哦！