您的位置：首页 > Web前端 > JavaScript

JavaScript实现图片的浮动效果

2012-02-23 21:04 447 查看

用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";

setTimeout("floatimg()",2);

}

floatimg();

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航