<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原生实现网页广告条飞舞的效果的更多相关文章

  1. 网站开发网页广告条不显示，出现ERR_BLOCKED_BY_CLIENT

    原因: 原因很简单,是因为被360浏览器的ad block给屏蔽掉了. 现象: 解决方案: 更换图片文件名,去掉ad,改成其他的字符.

  2. 自定义控件（视图）2期笔记03：自定义控件之使用系统控件（优酷案例之广告条Viewpager）

    1.首先我们看看运行效果,如下: 2. 下面就是详细实现这个效果的过程: (1)新建一个Android工程,命名为"广告条的效果",如下: (2)这里用到一个控件ViewPager ...

  3. 移动网页广告引入mraid.js使用指南

    在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景: 我开发了移 ...

  4. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  5. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  6. 使用Node.js原生API写一个web服务器

    Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...

  7. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  8. 了解 JavaScript （6）– 广告条（Banner)

    在 Web 上冲浪时,常常会见到定期在图像之间切换的广告条.我们可以用 JavaScript 来实现,重复循环显示它们. 创建循环的广告条 RotatingBanner.html 页面中在循环的广告条 ...

  9. JS实现Web网页打印功能（IE）

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

随机推荐

  1. 意外的php之学习笔记

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/gc_gongchao/article/details/37312039     什么是php? ph ...

  2. tesseract库

    1.简介 # -*-coding:utf8 -*- #图形验证码识别技术 ''' 阻碍我们爬虫的,有时候是在登录或者请求一些数据时候的图形验证码.因此这里我们讲解 一种能将图片翻译成文字的技术.将图片 ...

  3. ORA-27300 ORA-27301 ORA-27302 skgpspawn3 CRS-2674

    oracle@WWJD-DB1:~> $ORACLE_HOME/bin/srvctl start database -d ndscdb PRCR-1079 : Failed to start r ...

  4. Jvisualvm 添加插件

    1.访问地址:https://visualvm.github.io/pluginscenters.html,找到自己JDK版本对应的插件下载地址(我的JDK版本为1.7.0_67): 2.点击该链接进 ...

  5. Java中数组的几个常用算法：插入算法，删除算法，冒泡排序算法

    前言: 在Java中我们常常会用数组,提到数组就不得不介绍数组中常用到的几个算法. 有插入算法,删除算法,冒泡排序算法等. 在学习这几个数组的算法前,我们先来了解一下关于数组一些基本知识. 数组的基本 ...

  6. Go 初体验 - 闭包的几种情况

    闭包: 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者任何全局上下文中定义,而是在定义代码块的环境中定义.要执行的代码块(由于自由变量包含在代码块中,所以这些自由变量 ...

  7. C# Json处理相关

    最近工作中遇到的Json问题确实很头大,主要是各种转义符的处理,想了一种通用的方式,来处理任意转移方式的Json字符串: /// <summary> /// 去除返回值中的转义符,返回js ...

  8. [BZ4923][Lydsy1706月赛]K小值查询

    K小值查询 题面 维护一个长度为n的正整数序列a_1,a_2,...,a_n,支持以下两种操作: 1 k,将序列a从小到大排序,输出a_k的值. 2 k,将所有严格大于k的数a_i减去k. Input ...

  9. C# 键盘钩子

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  10. json转换导致金额失真问题解决

    平台的余额查询逻辑中,今天爆了个雷.因平台用户都是较大的商户,且资金一般都是整数(这也是埋雷这么久的原因吧),但今天有客户说他们今天充值金额有个0.63的零头,但为何页面展示的账户余额零头却只是0.6 ...