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中通过URL传递汉字的方法
Apr 09 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
vue-hook-form使用详解
Apr 07 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 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
玩转虚拟域名◎+ .
2006/10/09 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php-fpm配置详解
2014/02/12 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Angular实现form自动布局
2016/01/28 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
中专自荐信
2013/10/13 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
大学迎新生标语
2014/10/06 职场文书
催款函范本大全
2015/06/24 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
对讲机知识
2022/04/07 无线电
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers