js原生实现网页广告条飞舞的效果
<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;
//设置图片移动
//要是高度获取不到,h=document.documentElement.clientHeight;
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>
js原生实现网页广告条飞舞的效果的更多相关文章
- 网站开发网页广告条不显示,出现ERR_BLOCKED_BY_CLIENT
原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.
- 自定义控件(视图)2期笔记03:自定义控件之使用系统控件(优酷案例之广告条Viewpager)
1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...
- 移动网页广告引入mraid.js使用指南
在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景: 我开发了移 ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- 使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 了解 JavaScript (6)– 广告条(Banner)
在 Web 上冲浪时,常常会见到定期在图像之间切换的广告条.我们可以用 JavaScript 来实现,重复循环显示它们. 创建循环的广告条 RotatingBanner.html 页面中在循环的广告条 ...
- JS实现Web网页打印功能(IE)
问题描述: JS实现Web网页打印功能 问题解决: 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍: WebBrows ...
随机推荐
- Cocos Creator 构建发布... APP ABI(选项)
APP ABI 选项对应的是设备的 CPU 架构.勾选不同的值,编译出来的 apk 可以适用于不同的设备.勾选的越多,适配的机器越多.但是相应的 apk 包体越大. 需要根据自己的项目实际情况决定要编 ...
- shiro认证登录实现
准备工作: 在web.xml中配置shiro核心过滤器 在spring配置文件中提供核心过滤器运行所需要的辅助bean对象,在对象内注入安全管理器 拦截认证 配置三个url 拦截除了登录页面以及认证a ...
- Python_lambda
最近学习到python的lambda表达式也是匿名函数, lambda不需要使用def 语句这样标准的形式定义一个函数,并不需要花很多时间去额外定义一个不常用的函数.lambda的本省就是一个长度为一 ...
- Ansible 批量管理Windows Server服务器
Ansible批量管理Windows Server Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具, 它用Python写成,类似于saltstack和Puppe ...
- Linux 故障问题处理
一. Debian 网卡问题 原因: 网卡提示 Device Not Managed 处理方法: . 编辑/etc/NetworkManager/NetworkManager.conf: 将其 ...
- 【JavaScript】对JS的封装
以下方法封装了获取ID元素的JS代码,调用以下代码方法并传值,则可以直接获取id所指元素 function $id(x) { //此处x只是形参,代表传进来的:要获取元素的id字符串 return d ...
- Java EE开发技术课程
新的学期开始了,j2e已经上了两节课,接下来就是对该课程的一些作业以及相关的认识: 一.课程目标: Java EE是java的企业级应用,所以在我看来在学习这门课程之前肯定要对java有一个具体的认识 ...
- html-webpack-plugin 遇到 throw new Error('Cyclic dependency' + nodeRep)
今天遇到了 html-webpack-plugin 遇到 throw new Error('Cyclic dependency' + nodeRep) 错. 刚查到一篇文章,<手摸手,带你用合理 ...
- CentOS7 手动部署flannel并启用vxlan
本以为docker准备妥当之后,就可以直接上k8s了,结果yum install kubernetes,报错:Error: docker-ce conflicts with docker-1.9.1 ...
- DBDocumentGenerator使用
报错1:未能成功安装.NET Framework 3.5(包括.NET2.0和3.0) 解决办法:安装离线包. ( 1.将“sxs”文件复制到C盘,用完后可以删除:2.右键以管理员身份运行NET Fr ...