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树形控件脚本代码
Jul 24 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
老生常谈js-react组件生命周期
May 02 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 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快递单号查询接口使用示例
2014/05/05 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
JavaScript初学者必看“new”
2017/06/12 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python中random模块详解
2021/03/01 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
调解员先进事迹材料
2014/02/07 职场文书
中国梦口号
2014/06/13 职场文书
中国梦宣传标语口号
2015/12/26 职场文书