js 图片随机不定向浮动的实现代码_Javascript教程-查字典教程网
js 图片随机不定向浮动的实现代码
js 图片随机不定向浮动的实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下://很有趣的浮动哦,不用太多代码,和大家分享下随机浮动#divimg{/*对图片进行绝对定位*/position:abso...

复制代码 代码如下:

//很有趣的浮动哦,不用太多代码,和大家分享下

<html>

<head>随机浮动

<style type="text/css">

#divimg{

/*

对图片进行绝对定位

*/

position:absolute;

}

</style>

</head>

<body>

<div id="divimg">

<img src="../../resource/images/float.jpg" width="205" height="108">

</div>

<script language="javascript" type="text/javascript">

//获取图片的所有div对象

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

//设置起始位置

var x=0,y=0;

//设置图片的前进速度

var xSpeed=8,ySpeed=2;

//设置图片浮动高度和宽度

var w=document.documentElement.clientWidth-205,h=document.body.clientHeight-108;

//alert(w);

function floatimg(){

//比较是否达到边界,如果到达边界以后就改变图片的方向为反向,如果未达到边界则继续向前

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

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

x+=xSpeed;

y+=ySpeed;

setTimeout("floatimg()",1000);

var n=divimg.style.top=Math.round(Math.random()*h)+"px";

var m=divimg.style.left=Math.round(Math.random()*w)+"px";

}

floatimg();

</script>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类