利用window对象实现一个图片的浮动效果
来源:互联网 发布:单片机控制蜂鸣器发声 编辑:程序博客网 时间:2024/04/30 09:38
实现图片的浮动效果需要三步:
1,现有个广告div,就是其实点(0,0)
2,设置横向和纵向的速度
3,控制广告div移动
1)广告div是否到达边界
2)如果到达以后,我们按照这个速度反向移动
<head>
<div id="img">
<img scr="" width="" height="">
</div>
//获取图片所在的div对象
var img=document.getElementById("img");
//设置div起始点的坐标起始点(0,0)
var x=0,y=0;
//设置图片的行进速度
var xSpeed=2,ySpeed=1;
var w=document.getElement.availWidth-130,h=window.sreen.availHeight-150;
function floatimg(){
//比较图片是否到达边界
//如果到达边界以后,我控制图片改变方向
if(x>w||x<0) xSpeed= -xSpeed;
if(y>h||y<0) ySpeed= -ySpeed;
//如果没有到达边界,设置图片的左上角的坐标
//设置坐标值,起始坐标+速度
x+=ySpeed;
y+=ySpeed;
img.style.top=y+"px";
img.style.left=x+"px";
setTimeout("floatimg()",40);
}
floatimg();
</script>
</body>
</html>
- 利用window对象实现一个图片的浮动效果
- js 实现一个图片浮动的效果
- js实现图片浮动的效果
- JavaScript实现图片的浮动效果
- 实现多张图片浮动的效果
- JavaScript实现图片的浮动效果
- 【原】利用Silverlight实现类似iGoogle的浮动层拖拽效果
- 利用Silverlight实现类似iGoogle的浮动层拖拽效果
- Android之图片浮动随意拖拽的效果实现
- Unity鼠标悬停实现图片的浮动效果
- 利用jQuery实现图片信息的浮动显示
- 利用jQuery实现图片信息的浮动显示
- JS实现图片随机浮动效果
- 实现tablayout的浮动效果
- 分享一个自己利用javascript中的window.setInterval()定时器实现页面背景图片变换的特效(同时淡入淡出效果)
- JS做的网页图片浮动效果
- 浮动图片的css实现
- 一个将图片展示到手机屏幕,并让其不停的浮动的效果
- ini 文件的字段删除
- Js 判断浏览器类型
- Linux系统的管道命令
- 网络协议关系拓扑图 很全面 很好
- Android Suspend/resume 过程分析
- 利用window对象实现一个图片的浮动效果
- Oracle Direct-Path Insert学习笔记
- DevExpress.XtraGrid.GridView 自定义样式设置
- JSON对象和字符串之间的相互转换
- 9i客户端无法“直接”使用purge recyclebin命令清理10g数据库回收站信息
- javascript绘制金融图表
- Document对象的使用:getElementById()和getElementsByTagName()方法的使用练习
- ASP.NET 页生命周期概述
- Mysql5.5.9版本主从同步配置方法