JavaScript实现图片浮动动画效果

102 浏览量更新于2024-09-02 收藏 38KB PDF 举报

"myImg"src="你的图片URL"style="position:absolute;"/> </body> </html> 这段代码展示了一个使用JavaScript实现的浮动图片动态效果。在网页中，图片会沿着垂直和水平方向持续移动，创造出一种浮动的感觉。以下是代码的核心知识点： 1. **HTML结构**：HTML文档的结构包括`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`头部元素和`<body>`主体元素。在`<head>`中，有一个`<title>`标签用于定义页面标题，以及一个`<script>`标签用来插入JavaScript代码。 2. **CSS样式**：图片通过`<img>`标签定义，其`style`属性设置为`position:absolute;`，使图片相对于其最近的非静态定位祖先元素进行绝对定位，如果没有这样的祖先，则相对于`body`定位。 3. **JavaScript变量**： - `var step = 1;`：定义了图片每次移动的像素值。 - `var y = -1;` 和 `var x = 1;`：分别代表图片垂直和水平移动的方向，-1 表示向上或向左，1 表示向下或向右。 4. **JavaScript函数**： - `function myFloat() { ... }`：定义了一个名为`myFloat`的函数，这是实现图片浮动的关键。它会不断更新图片的位置。 5. **DOM操作**：`document.getElementById('myImg')`用于获取ID为`myImg`的图片元素，以便修改其位置。`img.style.top`和`img.style.left`用于获取和设置图片的顶部和左侧距离。 6. **条件判断**：`if...else`语句用于判断图片是否到达边界，从而改变移动方向。例如，当图片顶部距离小于等于0时，将`y`的值改为1，使得图片向下移动；当图片到达页面底部时，将`y`的值改回-1，使其向上移动。 7. **时间延迟函数**：`setTimeout("myFloat()", 20);`设置一个定时器，每隔20毫秒调用一次`myFloat`函数，确保图片连续平滑地移动。 8. **事件监听**：`body.onload="myFloat();"`确保在页面加载完成后执行`myFloat`函数，开始图片的浮动效果。 9. **CSS单位转换**：`replace("px", "")`用于移除CSS属性值中的"px"单位，以便将其转换为数字进行计算。这个例子展示了如何结合HTML、CSS和JavaScript来创建交互式网页元素，尤其是利用JavaScript实现动态效果。通过理解这些知识点，开发者可以创建更丰富的网页互动体验。

js浮动图片的动态效果浮动图片的动态效果

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

var step = 1; // 移动的像素

var y = -1; // 垂直移动的方向，-1表示向上，1表示向下

var x = 1; // 水平移动的方向，-1表示向左，1表示向右

function myFloat()

{

var img = document.getElementById(“myImg”);

// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位

var top = img.style.top.replace(“px”, “”);

// top = top – 100;

// img.style.top = top + “px”;

// 获取图片和当前浏览器窗口左边距

var left = img.style.left.replace(“px”, “”);

// left = left – 100;

// img.style.left = left + “px”;

// 上下移动

if(top <= 0)

{

y = 1;

}

if(top >= document.body.clientHeight)

{

y = -1;

}

top = (top*1) + (step * y);

img.style.top = top + “px”;

// 左右移动

if(left <= 0)

{

x = 1;

}

// alert(img.clientWidth);

if(left >= (document.body.clientWidth – img.clientWidth))

{

x = -1;

}

left = (left*1) + (step * x);

img.style.left = left + “px”;

setTimeout(“myFloat()”, 20);

}

</script>

</head>

<img id=”myImg” src=”//files.jb51.net/file_images/article/201307/2013071009420928.png”

style=”position: absolute; left: 500px; top: 400px; border: solid 1px black;” />

</body>

</html>

另一种的实现方式

代码如下:

<html>

<head>

<title>浮动广告实例</title>

var pos = 10;

function toueme() {

document.getElementById(“toubiao”).style.display = “none”;

}

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38632046

粉丝: 10
资源: 933

JavaScript实现图片浮动动画效果

js实现的简单图片浮动效果完整实例

js实现鼠标左右移动，图片也跟着移动效果

js实现图片漂浮效果的方法

JavaScript实现浮动图片动态效果

纯js版的FF14官网的蓝色碎片浮动动态效果

JS 多种浮动广告效果

JavaScript 浮动的图片广告.rar

广告浮动效果JS动态从XML里获取图片链接地址链接以及显示状态.

js文字浮动效果

js浮动浮动层显示有利于javaScript学习

最新资源