js实现广告漂浮效果的小例子


Posted in Javascript onJuly 02, 2013
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
div{
position:absolute;
}
</style>
</head>
<body>
<div id="floatdiv">
<img src="1.jpg" height="100px" width="200px">
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
/*
利用window对象,实现浮动效果
 1、有一个div,就是我们要控制的,它的起始点坐标(0,0)
 2、设定横向和纵向的速度
 3、控制div移动
  1)div是否到达边界,设置图片速度反向移动
*/
//获取图片所在的div对象
var img=document.getElementById("floatdiv");
//设置div起始点坐标
var x=0,y=0;
//设置div行进速度
var xSpeed=2,ySpeed=1;
//设置图片移动
var w=document.body.clientWidth-200,h=document.body.clientHeight-100;
function floatdiv(){
 //比较图片是否到达边界,如查到达边界 改变方向;如未到达边界
 if(x>w||x<0) xSpeed= -xSpeed;
 if(y>h||y<0) ySpeed= -ySpeed;
 x+=xSpeed;
 y+=ySpeed;
 //设置坐标值,起始坐标+速度
 img.style.top=y+"px";
 img.style.left=x+"px";
setTimeout("floatdiv()",10);
}
floatdiv();
</script>
Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JQuery live函数
Dec 24 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 #Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 #Javascript
js创建子窗口并且回传值示例代码
Jul 02 #Javascript
封装html的select标签的js操作实例
Jul 02 #Javascript
使用js获取地址栏中传递的值
Jul 02 #Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 #Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 #Javascript
You might like
php错误日志简单配置方法
2016/07/11 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
python如何使用unittest测试接口
2018/04/04 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python调用百度REST API实现语音识别
2018/08/30 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
在python中修改.properties文件的操作
2020/04/08 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
艺术系应届生的自我评价
2013/10/19 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
数学教师个人工作总结
2015/02/06 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
体育教师研修感悟
2015/11/18 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js