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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
详解VSCode配置启动Vue项目
May 14 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Django实现快速分页的方法实例
2017/10/22 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
使用python画社交网络图实例代码
2019/07/10 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
what is the difference between ext2 and ext3
2013/11/03 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
网络编辑岗位职责
2014/03/18 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
网络营销计划
2015/01/17 职场文书
人生感悟经典句子
2019/08/20 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB