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 相关文章推荐
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
JavaScript 空间坐标的使用
Aug 19 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
移动节点的jquery代码
2014/01/13 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
详解JS数值Number类型
2018/02/07 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
解决Python requests 报错方法集锦
2017/03/19 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python实现canny边缘检测
2020/09/14 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
优秀演讲稿范文
2013/12/29 职场文书
鲁迅故里导游词
2015/02/05 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis