Html 在网页、页面中鼠标旋转的特效：

效果展示，如同本页面所示。

<body>
<script language="JavaScript">
<!-- 
var images='http://www.baidu.com/img/baidu_logo.gif';//图片的地址!!
var amount=8;       //图片的数量!!
var yBase = 150;
var xBase = 200;
var step = 0.2;
var currStep = 0;
var Xpos = 5;
var Ypos = 5;
var i = 0;
var j = 0;
if (document.all)
{
document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">')
document.write('<div id="c" style="position:relative">');
for (n=0; n < amount; n++)
document.write('<img src=" '+images+'" style="position:absolute;top:0px;left:0px">')
document.write('</div>')
document.write('</div>')

function MsieMouseFollow(){
 Xpos = document.body.scrollLeft+event.x-5;
 Ypos = document.body.scrollTop+event.y-5;
 }
 document.onmousemove = MsieMouseFollow;
}
else if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
for (ns=0; ns < amount; ns++)
document.write("<LAYER NAME='n"+ns+"' LEFT=0 TOP=0><IMG SRC='"+images+"'></LAYER>");
function NsMouseFollow(evnt){
 Xpos = evnt.pageX-5;
 Ypos = evnt.pageY-5;
 }
 window.onMouseMove = NsMouseFollow;
}
function Swirl(){
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4;
 xBase = window.innerWidth/4;
}

if (document.all)
{
 for (i=0;i<ieDiv.all.c.all.length;i++)
 {
  ieDiv.all.c.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  ieDiv.all.c.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}
else if (document.layers)
{
 for ( j = 0 ; j < ns ; j++ ) //7 is number of NS layers!
 {
  var temp="n"+j
  document.layers[temp].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[temp].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("Swirl()", 10);
}
Swirl();
// -->
</script>
<body>

    Html 在网页、页面中跟随鼠标旋转的图片特效，Html 在网页中跟随鼠标旋转的图片特效，Html 在页面中跟随鼠标旋转的图片特效，Html 网页中跟随鼠标旋转的图片特效，Html 页面中跟随鼠标旋转的图片特效，Html 网页中跟随鼠标旋转的图片，Html 页面中跟随鼠标旋转的图片，Html 网页随鼠标旋转的图片，Html 页面随鼠标旋转的图片，Html 随鼠标旋转的图片，Html 随鼠标旋转图片，Html 鼠标旋转图片，Html 旋转图片，Html 在网页、页面中鼠标旋转的特效，Html 在网页中鼠标旋转的特效，Html 在页面中鼠标旋转的特效，Html 在网页中鼠标旋转特效，Html 在页面中鼠标旋转特效，Html 网页中鼠标旋转特效，Html 页面中鼠标旋转特效，Html 网页鼠标旋转特效，Html 页面鼠标旋转特效，Html 鼠标旋转特效，Html 鼠标旋转，Html 鼠标特效。

留言评论（旧系统）：

佚名 @ 2014-06-05 11:56:18

这个是图片随着鼠标旋转的代码，，，如果是字随鼠标旋转的代码是什么

本站回复：

把图片（<img标签）换成文字就可以了。

佚名 @ 2015-04-20 10:05:41

请问下，如果是要8张不同的照片跟随鼠标旋转，该怎么修改代码？

本站回复：

1、【var images =】改成数组。 2、【var amount = 8;】改成数组的大小。 3、【+ images +】，改成数组值。