<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" >
var content='ffffffffffffffffffffffff';
var length=content.length;
var xArr=new Array(length);
var yArr=new Array(length);
var step=20;
var x=0,y=0;
//初始内容存放位置
for(i=0;i<length;i++){
document.write('<div id=div'+i+' style="position:absolute;top:0;">'+content.charAt(i)+'</div>');
xArr[i]=i*step;yArr[i]=0;
}
function follow(){
//前+后-
xArr.unshift(x);xArr.pop();
yArr.unshift(y);yArr.pop();
for(i=0;i<length;i++){
var dv=document.getElementById('div'+i)
//y轴坐标相同，x轴保持一定间距
dv.style.left=xArr[i]+i*step;dv.style.top=yArr[i];
}
}
//监听鼠标位置
function getpos(event){
x=event.clientX;y=event.clientY+document.body.scrollTop;
}
//定时对数组unshift,pop操作，目的使数组中的每个元素相同
window.setInterval(follow,30);
</script>
</HEAD>
<BODY onmousemove="getpos(event)" onscroll="getpos(event)">
</BODY>
</HTML>
分享到：
相关推荐
总的来说，通过AS3我们可以轻松地创建出各种交互式效果，如本例中的小球跟随鼠标飘动。这不仅展示了AS3的灵活性，也让我们看到了编程在数字艺术和游戏开发中的无限可能。通过不断学习和实践，你将能够创造出更多富有...
当用户在页面上移动鼠标时，页面上的图片将随之移动，为用户呈现出图片随着鼠标飘动的视觉效果。 实现这样的效果，除了基本的JavaScript知识，还需要了解CSS中定位的相关知识，如相对定位、绝对定位等，因为这些...
5.18 跟随鼠标跳动的星星 119 5.19 冒水泡的鼠标 121 5.20 跟随鼠标的幻影文字 123 5.21 非图片鼠标跟踪 124 5.22 自动变化的鼠标指针 127 5.23 跟随鼠标的流星 128 第6章 图片类特效 133 6.1 鼠标控制图片的...
13. **跟随鼠标飘动的双层时钟**：结合鼠标跟踪和时间更新，创建一个动态的、跟随鼠标的时钟。 14. **按时间显示不同信息**：使用JavaScript的日期对象，根据当前时间显示相应信息。 15. **禁用鼠标左右键**：监听...
这个“H5 Canvas鼠标控制粒子火焰特效特效代码”是一个利用Canvas实现的互动式视觉效果，它创建了一种跟随鼠标移动的粒子火焰动画。 在Canvas上绘制粒子火焰特效涉及以下几个关键知识点： 1. **Canvas API**：...
在这个项目中，JS将被用来实现动态效果，比如让圣诞树上的灯光闪烁，或者让雪花随鼠标移动而飘动。JavaScript可以通过修改DOM（Document Object Model）来实时更新页面内容。例如，使用`setInterval`函数可以定时...
通常，我们会使用`beginPath()`开始一个新的路径，`moveTo()`移动到指定位置，`lineTo()`画线到另一个位置，最后用`stroke()`描边以显示线条。 为了使线条看起来像流动的丝带，我们可以调整线条的颜色、宽度和透明...
- 鼠标交互：可以通过监听鼠标事件，实现鼠标移动时粒子跟随或者鼠标点击时生成新的粒子效果。 - 边界碰撞：粒子可以设置为在边界反弹或消失。 五、性能优化 尽管 particle.js 能创建复杂的粒子效果，但大量的粒子...
- `setInterval()` 函数周期性地执行指定的函数，这里是每80毫秒调用一次`moveR`函数，使得漂浮窗口跟随滚动条移动。 - `moveR` 函数计算漂浮窗口的新位置，基于浏览器的视口高度和宽度。 - `closead` 函数用于...