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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
jQuery 选择器用法基础入门示例
Jan 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php返回json数据函数实例
2014/10/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
pandas多级分组实现排序的方法
2018/04/20 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
JAVA和C++区别都有哪些
2015/03/30 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
春秋淹城导游词
2015/02/11 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python