js 图片随机不定向浮动的实现代码
2013-07-02 00:00
776 查看
//很有趣的浮动哦,不用太多代码,和大家分享下 <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>
相关文章推荐
- js实现图片的随机不定向浮动
- 无需JS和jQuery代码实现CSS3鼠标浮动放大图片
- JS实现图片随机浮动效果
- js 脚本实现图片联系滚动代码
- DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码
- js或者jquery判断图片是否加载完成实现代码
- 基于JavaScript代码实现随机漂浮图片广告
- jQuery实现图片信息的浮动显示实例代码
- cropper js基于vue的图片裁剪上传功能的实现代码
- jquery代码实现简单的随机图片瀑布流效果
- JS实现鼠标指向图片抖动代码
- js实现兼容IE、Firefox的图片缩放代码
- jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
- JS实现鼠标滚轮缩小放大拖动图片代码
- JS实现侧悬浮浮动实例代码
- 如何通过js实现图片预览功能【附实例代码】
- js实现网页图片延时加载的原理和代码
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)