手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 图片随机不定向浮动的实现代码
js 图片随机不定向浮动的实现代码
摘要:复制代码代码如下://很有趣的浮动哦,不用太多代码,和大家分享下随机浮动#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>

【js 图片随机不定向浮动的实现代码】相关文章:

JavaScript点击按钮后弹出透明浮动层的方法

javascript瀑布流式图片懒加载实例

javascript鼠标滑动评分控件完整

javascript自定义右键弹出菜单实现方法

鼠标图片振动代码

jQuery处理图片加载失败的常用方法

超酷右下浮出广告窗口代码

在页面中输出当前客户端时间javascript实例代码

图片加载进度实时显示

些很实用且必用的小脚本代码

精品推荐
分类导航