js 图片随机不定向浮动的实现代码
更新时间：2013年07月02日 16:31:38 作者：
这篇文章介绍了js图片随机不定向浮动的实现代码，有需要的朋友可以参考一下
复制代码 代码如下:
//很有趣的浮动哦，不用太多代码，和大家分享下
<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实现十五拼图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
对于经常用js的朋友，有时候一段脚本并不是两个浏览器都兼容的，下面一些对ie和firefox都兼容的一些代码，大家可以学习下。2008-10-10
这篇文章主要为大家详细介绍了微信小程序实现简单搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
学习js就不得不学他的数组，这篇文章是由色拉油整理下，需要学习js数组的朋友可以参考下2013-10-10
这篇文章主要介绍了原生JavaScript实现拖动校验功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了javascript遇到html5的一些表单属性的相关资料,需要的朋友可以参考下2015-07-07
浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果。本文使用JavaScript实现跟随广告的示例代码，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下2015-10-10
jsonp 全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。下面让我们了解一下是如何使用的吧。2013-10-10
innerHTML，outerHTML,innerTEXT三者之间的区别
innerHTML，outerHTML,innerTEXT三者之间的区别...2007-01-01
最新评论