`

指定内容跟随鼠标位置飘动

    博客分类:
  • web
阅读更多
<!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>
0
2
分享到:
评论

相关推荐

    as3做的一串跟随鼠标飘动的小球

    在本文中,我们将深入探讨如何使用ActionScript 3(AS3)编程语言创建一个互动效果,使得小球跟随鼠标在舞台上飘动。ActionScript 3是Adobe Flash Professional和FlashDevelop等工具中的主要脚本语言,它为动画和...

    很酷的时钟 (跟随鼠标飘动的双层时钟!).

    根据给定的文件标题、描述、标签以及部分内容,本文将详细介绍一种特殊效果的时钟——“很酷的时钟(跟随鼠标飘动的双层时钟)”。此时钟不仅具备基本的时间显示功能,还拥有独特的动态效果:时钟会随着鼠标在网页上...

    飘动的雪花跟随鼠标移动

    运用duplicate使雪花跟随鼠标 ,合理在动画中运用duplicate.适合基础人员。 雪花飘动。。跟随鼠标。通过实例讲解,更易于基础学习的人员学习,实例包含原代码。PDF文档中,包含对此代码的讲解。

    随鼠标飘动的文字效果

    实现了随鼠标飘动的文字效果,文字可以用图片等代替!!!!

    C#窗体飘动C#窗体飘动C#窗体飘动

    这个基础的飘动功能可以让窗体随着鼠标的移动而移动,但若要实现更复杂的飘动效果,如QQ那样平滑的动画效果,可能需要引入定时器并使用更精细的坐标计算,以确保窗口移动的平滑性。 此外,有时候我们可能需要阻止...

    AS3 文字跟随

    这是用flash pro AS3.0写的文字跟随鼠标移动效果

    图片飘动图片飘动图片飘动

    在给定的部分内容中,首先定义了一个`&lt;div&gt;`元素,并赋予了`id`为`img`,设置其`position`属性为`absolute`,这意味着该元素将相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先,则相对于文档流本身定位。...

    javascript实现图片跟随鼠标移动效果的方法

    在Web开发中,实现图片跟随鼠标移动效果是一个常见的互动效果,它能够提升用户体验,并让网页的互动性大大增强。本文将详细介绍使用JavaScript来实现图片跟随鼠标移动的具体方法。 首先,需要了解的是JavaScript的...

    即时JS飘动窗口

    首先,我们需要在HTML中创建一个包含窗口内容的元素,然后使用JavaScript来动态地改变这个元素的位置和样式,以实现飘动的效果。 飘动窗口的核心技术包括以下几个方面: 1. **DOM操作**:JavaScript提供了对HTML...

    用C#做的飘动的窗体!

    此外,为了使飘动的窗体更具交互性,可以添加鼠标事件监听,当用户点击或靠近窗体时,窗体可以暂停飘动,或者根据用户的鼠标操作改变飘动的方向和速度。 最后,标签中的“JAVA”可能意味着开发者也对Java有所了解。...

    窗体飘动小程序 C#

    开发者可能使用了鼠标事件(如MouseMove或MouseDown)来捕捉用户的输入,然后在每次事件触发时改变窗体的位置,模拟出飘动的效果。 例如,开发者可能在鼠标按下时记录鼠标位置,然后在鼠标移动时更新窗体位置。为了...

    OpenGL实现飘动效果

    飘动效果涉及物体的位置和旋转,这需要通过矩阵变换来实现。矩阵可以用来缩放、平移和旋转物体,使旗帜随风摇摆。 2. **顶点着色器和片段着色器**:在OpenGL中,我们可以编写自定义的着色器程序来处理图形的顶点和...

    JS漂浮广告代码,图片飘动,响应鼠标停止

    标题中的“JS漂浮广告代码,图片飘动,响应鼠标停止”揭示了这个压缩包文件包含的是一段JavaScript代码,用于实现网页上的漂浮广告效果。这种广告通常会在页面上浮动,跟随用户的滚动,当鼠标靠近时会停止移动,以...

    c#制作飘动动画窗体(上下左右)飘动

    飘动动画的基础是改变窗体的位置,通过定时器(Timer)控制改变位置的频率。以下是实现飘动动画的基本步骤: 1. **创建窗体**:首先,创建一个新的Windows Forms项目,在设计视图中添加一个窗体,并设置其初始位置...

    css3云雾飘动

    通过应用`animation`属性,我们可以让这个动画在指定的时间内循环播放,创建出云雾飘动的效果。 ```css .cloud-background { animation: float-clouds 10s linear infinite; } ``` 这里,`float-clouds`是引用...

    form窗体的飘动

    总结起来,实现"form窗体的飘动"主要涉及C#中的Form窗体、Timer控件以及窗体位置的动态更新。通过编程控制窗体的移动,可以创建各种有趣的视觉效果,增强用户体验。在实际项目中,这种技术可以应用于通知窗体、提示...

    飘动效果 OpenGL飘动效果

    1. **顶点坐标**:OpenGL中的几何形状是由顶点定义的,飘动效果通常涉及改变这些顶点的位置。通过在时间上调整顶点坐标,我们可以让对象看起来在屏幕上移动或摇晃。 2. **着色器**:OpenGL使用着色器来处理图形的...

    网页上随意飘动的广告js

    网页上随意飘动的广告js源代码,点击可以关闭效果

    窗口飘动(Timer控件)

    在“窗口飘动”效果中,我们可以通过调整窗口的位置坐标来实现。这通常涉及以下几个步骤: 1. **初始化Timer控件**:在窗体的初始化或加载事件中,实例化一个Timer控件,并设置其Interval属性为适当的值,如500毫秒...

    兼容ie,firfox,chrome的页面广告随机飘动效果

    我们可以利用`.animate()`函数创建自定义的动画效果,调整广告元素的位置,模拟飘动的视觉体验。 接下来,我们将讨论如何实现这个飘动效果。首先,需要在HTML中定义广告元素,可以是图片、文本或任何其他可展示的...

Global site tag (gtag.js) - Google Analytics