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 实现表单验证功能代码(简洁)
Jul 03 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php判断表是否存在的方法
2015/06/18 PHP
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python进行数据提取的方法总结
2016/08/22 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
读书演讲主持词
2014/03/18 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
质量保证书范本
2014/04/29 职场文书
读书之星事迹材料
2014/05/12 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Python Pandas解析读写 CSV 文件
2022/04/11 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js