`

Javascript实现图片随机漂浮

JavaScript 
阅读更多 
<html>
<head>
</head>
<body>
	<div id="img" style="position:absolute;width:200; height:151"><img src="pic.jpg" border="0"></div>

<script LANGUAGE="JavaScript">
var xPos = 20;
var yPos = 10;
img.style.left= xPos;
img.style.top = yPos;
var step = 1;
var delay = 30; 
var width,height,Hoffset,Woffset;
var y = 1;
var x = 1;
var interval;
img.visibility = "visible";
function changePos() 
{
  width = document.body.clientWidth;
  height = document.body.clientHeight;
  Hoffset = img.offsetHeight;
  Woffset = img.offsetWidth;
  if (y) 
  {
    yPos = yPos + step;
  }
  else 
  {
    yPos = yPos - step;
  }
  if (yPos < 0) 
  {
    y = 1;
    yPos = 0;
  }
  if (yPos >= (height - Hoffset)) 
  {
    y = 0;
    yPos = (height - Hoffset);
  }
  if (x) 
  {
    xPos = xPos + step;
  }
  else 
  {
    xPos = xPos - step;
  }
  if (xPos < 0) 
  {
    x = 1;
    xPos = 0;
  }
  if (xPos >= (width - Woffset)) 
  {
    x = 0;
    xPos = (width - Woffset);
  }
  img.style.left = xPos + document.body.scrollLeft;
  img.style.top = yPos + document.body.scrollTop;
}
function start() 
{
  interval = setInterval('changePos()', delay);
}
function pause_resume() 
{
    clearInterval(interval);
}
start();
</script>
</body>
</html>
 
  • 大小: 11.5 KB
分享到：
| ListView 分页显示
评论
2 楼 guangqiang 2012-10-10  
Skyming 写道
问你个问题：为什么 ctrl + V 复制的不能浮动 ？ 而点击 复制后会有很多黑色方框？

我的下面有 源码链接啊 你可以down下来看看有什么问题...
祝你顺利....
1 楼 Skyming 2012-10-10  
问你个问题：为什么 ctrl + V 复制的不能浮动 ？ 而点击 复制后会有很多黑色方框？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript实现的广告漂浮

    实现广告漂浮的JavaScript技术主要涉及以下几个关键知识点： 1. **DOM操作**：Document Object Model (DOM)是HTML和XML文档的结构化表示，JavaScript通过DOM API可以访问和修改页面元素。在广告漂浮效果中，我们...

    js原生态随机漂浮到整个页面上的文字特效点击按钮立即归队.zip

    在JavaScript的世界里，实现动态效果是一项常见的任务，而“js原生态随机漂浮到整个页面上的文字特效点击按钮立即归队”就是一个典型的交互式网页特效。这个特效涉及到的知识点包括JavaScript基础、DOM操作、事件...

    图片随机漂浮

    在这个例子中，`floatImage`函数负责计算和设置新的位置，而`setInterval`会每隔指定的`更新间隔时间`调用这个函数，从而实现图片的随机漂浮。 如果"随机漂浮的广告"是描述的内容，那么这可能是一种广告展示策略。...

    js漂浮代码演示 javascript漂浮随机

    js漂浮代码演示 javascript漂浮随机OK

    页面图片随机浮动效果

    这种效果通常是通过JavaScript或CSS3来实现的，让图片在页面上以随机的位置和速度移动，给人一种生动的感觉。下面我们将深入探讨如何利用这两种技术来创建这种效果。 首先，我们关注CSS3的方法。CSS3引入了动画...

    基于JavaScript代码实现随机漂浮图片广告

    标题中的“基于JavaScript代码实现随机漂浮图片广告”和描述中的“符合W3C标准的漂浮代码”指出了知识点的核心：使用JavaScript语言在遵守W3C标准的前提下，创建能够在网页中随机移动的图片广告。 首先，什么是W3C...

    全屏图片广告随机漂浮可点击关闭jQuery特效.zip

    同时，图片的初始位置可以通过JavaScript随机生成，确保每次刷新页面时广告的位置都有所不同，增加用户体验的新鲜感。 2. **鼠标悬停事件**：当用户将鼠标悬停在广告图片上时，特效会暂停图片的运动。这可以通过...

    javascript 物理弹性漂浮广告.zip

    在网页设计中，物理弹性漂浮广告是一种利用JavaScript和jQuery技术实现的动态广告展示方式。这种广告设计能够吸引用户的注意力，同时保持与页面内容的互动性。"javascript 物理弹性漂浮广告.zip" 文件可能包含了一个...

    js漂浮广告

    在本主题中，我们主要关注的是“js漂浮广告”，这是一种常见的网页广告形式，它利用JavaScript技术实现广告在页面上的浮动效果。 一、js漂浮广告的工作原理 js漂浮广告的核心是通过JavaScript代码控制广告元素的...

    JavaScript实现的3D球面标签云效果

    在本项目中，"JavaScript实现的3D球面标签云效果"是一个利用JavaScript创建的动态视觉效果，它将关键词或文字以3D形式展示在球面上，为用户带来新颖且互动的体验。 实现这个效果的关键技术主要包括以下几个方面： ...

    同时漂浮多个图片广告的JS特效

    3. **JavaScript事件**：为了实现图片位置的随机变化，我们需要监听页面的`load`事件，当页面完全加载后，执行生成新位置的函数。此外，还可以监听`resize`事件，以确保在窗口大小改变时，广告图片的位置也能适应...

    非常炫的javascript图片效果

    在本主题中，我们将探讨“非常炫的JavaScript图片效果”，这是一个关于利用JavaScript实现的各种吸引人的图片展示特效的集合。 首先，让我们了解JavaScript在处理图片上的基本应用。JavaScript可以用来改变图片源...

    CSS+JS图片弹出漂浮特效

    这个小项目旨在通过结合CSS样式和JavaScript脚本，创建一个动态背景，其中包含随机颜色的气球漂浮效果，以及图片自动弹出并漂浮的功能。此外，它还包含了图片自动轮询弹出和自动播放音乐的特性，为用户带来更为丰富...

    jQuery实现的可拖动的图片漂浮广告特效源码.zip

    在本资源中，我们主要探讨的是使用jQuery库来创建一个可拖动的图片漂浮广告特效。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得开发者能更高效地创建动态网页。在这...

    带关闭按钮的网页漂浮广告代码（全屏漂浮）

    - 实现了广告在屏幕上随机移动的效果。 3. **`start()`函数**： - 显示广告并启动定时器，使广告能够自动移动。 #### 五、关键技术点 1. **DOM操作**：通过修改`div`元素的`style`属性来调整其位置。 2. **事件...

    HTML5画布漂浮分子.rar

    "HTML5画布漂浮分子"是一个利用HTML5的canvas元素、JavaScript、CSS技术实现的特效，旨在创建一种动态的、视觉上吸引人的效果，即在网页背景上显示随机漂浮的分子状图形。 首先，让我们详细了解一下HTML5的canvas...

    原生JS实现彩色漂浮的文字动画特效源码.zip

    在本资源中，我们主要探讨的是如何使用原生JavaScript实现彩色漂浮的文字动画特效。这种效果常见于网页设计中，可以增加网站的视觉吸引力和趣味性。原生JS（JavaScript）是一种广泛使用的客户端脚本语言，它允许...

    符合W3C的漂浮广告代码.txt

    该代码段实现了一个简单的漂浮广告功能，并且声明了其遵循XHTML 1.0过渡型DTD标准，这符合W3C的规范要求。 ##### 1. 文档类型声明 ```html &lt;!DOCTYPE ...

Magicbox
Global site tag (gtag.js) - Google Analytics