JavaScript前端应用：图片自动按轨迹移动效果

lt;head>

<title>无标题文档</title>

<style>

div{

position:absolute;

}

</style>

</head>

<body>

</div>

//获取图片div对象

var img=document.getElementById("divimg");

//设置div左上角起始点坐标

var x=0,y=0;

//设置图片的行进速度

var xSpeed=5,ySpeed=5;

//设置图片的最大浮动高度和宽度

var w=document.body.clientWidth-150,h=document.body.clientHeight-150;

function floatimg(){

//比较图片是否到达边界

//如果到达边界以后，我控制图片改变方向

if(x>w||x<0) xSpeed= -xSpeed;

if(y>h||y<0) ySpeed= -ySpeed;

//如果没有到达边界，设置图片的左上角坐标，

//设置坐标值起始坐标+速度

x+=xSpeed;

y+=ySpeed;

img.style.top=y+"px";

img.style.left=x+"px";

setTimeout("floatimg()",50);

}

floatimg();

</script>

</body>

先，通过视频了解要实现怎么一个效果，视频如下：

分析

1.鼠标不断的移动，使用鼠标移动事件：mousemove

2.在页面中移动，给document注册事件

3.图片要移动距离，而且不占位置，我们使用绝对定位即可

4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片了。

代码

景图片

本例演示如何向 HTML 页面添加背景图片。

<html>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>

</html>

HTML基础操作：图片显示

在线咨询

上一篇：CSS注入实例
下一篇：21.HTML 浮动、定位和显示属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript前端应用：图片自动按轨迹移动效果

先， 通过视频了解要实现怎么一个效果，视频如下：

分析

代码

景图片

您的项目需求

先，通过视频了解要实现怎么一个效果，视频如下：