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使用办法
Apr 01 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
Javascript 之封装(Package)
Sep 14 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python实现交并比IOU教程
2020/04/16 Python
python如何更新包
2020/06/11 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
XML文档面试题
2015/08/05 面试题
毕业班班主任工作总结2015
2015/07/23 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技