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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue Components 数字键盘的实现
Sep 18 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
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
js树形控件脚本代码
2008/07/24 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python中psutil的介绍与用法
2019/05/02 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
python基于opencv实现人脸识别
2021/01/04 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
机械电子工程毕业生自荐信
2013/11/23 职场文书
优秀员工自荐书
2013/12/19 职场文书
会计电算化专业求职信
2014/06/10 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书