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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
node.js中使用Export和Import的方法
Sep 18 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
Javascript this关键字使用分析
2008/10/21 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
JS二分查找算法详解
2017/11/01 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
详解Django框架中的视图级缓存
2015/07/23 Python
谈谈python中GUI的选择
2018/03/01 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
水务局局长岗位职责
2013/11/28 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
公司业务员岗位职责
2014/03/18 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
高中生逃课检讨书
2014/10/10 职场文书
端午节寄语2015
2015/03/23 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL