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 相关文章推荐
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Python中的下划线详解
2015/06/24 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python 字符串追加实例
2019/07/20 Python
python各种excel写入方式的速度对比
2020/11/10 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
PHP面试题及答案二
2015/05/23 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
应届生骨科医生求职信
2013/10/31 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
项目建议书范文
2014/05/12 职场文书
奖励通知
2015/04/22 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
go设置多个GOPATH的方式
2021/05/05 Golang
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python