js 图片随机不定向浮动的实现代码


Posted in Javascript onJuly 02, 2013
//很有趣的浮动哦,不用太多代码,和大家分享下
<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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
js Dom实现换肤效果
Oct 21 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
js猜数字小游戏的简单实现代码
Jul 02 #Javascript
jQuery中获取Radio元素值的方法
Jul 02 #Javascript
js网页版计算器的简单实现
Jul 02 #Javascript
js实现广告漂浮效果的小例子
Jul 02 #Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 #Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 #Javascript
js创建子窗口并且回传值示例代码
Jul 02 #Javascript
You might like
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python API len函数操作过程解析
2020/03/05 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
django和flask哪个值得研究学习
2020/07/31 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
中学教师培训制度
2014/01/31 职场文书
组工干部演讲稿
2014/09/02 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
具结保证书
2015/01/17 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python