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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
jQuery 使用个人心得
Feb 26 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 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 stream_context_create()作用和用法分析
2011/03/29 PHP
代码生成器 document.write()
2007/04/15 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
js判断节假日实例代码
2017/12/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
js实现小星星游戏
2020/03/23 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python 转换文本编码实现解析
2019/08/27 Python
django中瀑布流写法实例代码
2019/10/14 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
鲜果饮品店创业计划书
2014/01/21 职场文书
标准化管理实施方案
2014/02/25 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
项目负责人岗位职责
2015/02/15 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Sql Server之数据类型详解
2022/02/28 SQL Server