JavaScript实现图片的浮动效果

最新推荐文章于 2020-12-13 22:52:08 发布

zwt90

最新推荐文章于 2020-12-13 22:52:08 发布

阅读量748

点赞数

文章标签： javascript div function html

本文链接：https://blog.csdn.net/zwt90/article/details/7288633

版权

用JavaScript实现图片图片的浮动效果代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂浮的图片</title>
<style type="text/css">
div{
position:absolute;
}
</style>
</head>

<body>
<div id="divimg">
<img src="2.jpg" width="50" height="90" />
</div>
<script language="javascript" type="text/javascript">
//获取图片所在的div对象
var divimg=document.getElementById("divimg");
//设置div起始点的位置
var x=0,y=0;
//alert(document.body.offsetHeight);
//var w=document.body.offsetWidth,h=document.body.offsetHeight;

//var w=window.screen.availWidth,h=window.screen.availHeight;
//设置div行进的速度
var xSpeed=2,ySpeed=1;
divimg.style.left=x+"px";
divimg.style.top=y+"px";

var w=document.body.clientWidth-50;
var h=document.body.clientHeight-90;

function floatimg(){
  //比较图片是否到达边界，若到达边界则改变方向

  if(x>w || x<0) { xSpeed=-xSpeed; }
  if(y>h || y<0) { ySpeed=-ySpeed; }


  x=x+xSpeed;
  y=y+ySpeed;

  //设置坐标值，起始坐标+速度
  divimg.style.left=x+"px";
  divimg.style.top=y+"px";