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 相关文章推荐
写出高效jquery代码的19条指南
Mar 19 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
微信小程序checkbox组件使用详解
Jan 31 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
JS实现滑动插件
Jan 15 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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 microtime获取浮点的时间戳
2010/02/21 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python入门之后再看点什么好?
2018/03/05 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Django权限控制的使用
2021/01/07 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
青年教师培训方案
2014/02/06 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
《草原》教学反思
2014/02/15 职场文书
决心书标准格式
2014/03/11 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
责任书范本
2014/08/25 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
护士个人年度总结范文
2015/02/13 职场文书
大学生求职自荐信
2015/03/24 职场文书
小学记事作文之200字
2019/08/06 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js