javascript随机图片效果
2012-02-27 20:01
323 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片随机浮现</title> <style type="text/css"> div { position:absolute; } </style> </head> <body> <div id="pic"><img src="11.BMP" width="150" height="100"/></div> </body> </html>
<script type="text/javascript" language="javascript"> //获取图片所在的div对象 var pic = document.getElementById('pic'); var w=document.body.clientWidth-150,h=document.body.clientHeight-100; //窗口的大小 function floatimg(){ //产生随机坐标 var x = Math.random()*w; var y = Math.random()*h; //图片的定位 pic.style.left=x+"px"; pic.style.top=y+"px"; setTimeout("floatimg()",1000); } floatimg(); </script>
原理:通过Math.random()产生不同的随机数为图片的坐标,然后定位图片,接着利用setTimeout产生一个一直循环不同变换坐标的效果
相关文章推荐
- JavaScript] 随机幻灯片图片效果
- JavaScript实现图片的浮动效果
- JavaScript + CSS 实现图片放大预览效果
- JavaScript 图片滑动展示效果javascript
- javascript图片滑动效果实现
- Javascript仿flash焦点图片效果
- 随机幻灯片图片效果
- JavaScript 图片切换展示效果alibaba拓展版第1/3页
- Canvas + JavaScript 制作图片粒子效果
- JavaScript 图片变换效果(ie only)
- JavaScript代码实现图片循环滚动效果
- JavaScript基础 设置图片的高度与宽度 在网页中出现一个随机大小 的太阳图片
- JavaScript 图片切割效果(带拖放、缩放效果)
- JavaScript 图片切割效果(带拖放、缩放效果)
- javascript实现刷新页面随机显示图片
- javascript结合canvas实现图片旋转效果
- 教你用javascript实现随机标签云效果_附代码
- 【JavaScript 插件】实现图片倒影效果 - reflex.js
- 用javascript实现来随机位置出现广告图片
- JavaScript 创建随机数和随机图片