<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title></title>

	<link rel="stylesheet" href="">

	<style type="text/css">

		.box2{width: 200px; height: 200px; background:red; border-radius:50%; position: relative;}

	</style>

</head>

<body>

	<button type="" id="start">开始</button>

	<button type="" id=stop>停止</button>

	<div id="box" class="box2">

	</div>

	<script type="text/javascript">

	//声明页面的宽高和投票、left

	var lr=800;

	var tb=300;

	var i=0;

	var j=0;

	//获取id

	var box=document.getElementById("box");

	var start=document.getElementById("start");

	var stop=document.getElementById("stop");

	//点击开始按钮消失，停止按钮显示

	start.onclick=function(){

		start.style.display='none';

		stop.style.display='inline';

	//setInterval循环函数

	var time=setInterval(function(){

		//赋值left、top

		box.style.left=i+'px';

		box.style.top=j+'px';

		//当left大于宽度时  left--

		if(i>lr){

			lr=0;

			i--;

		}

		//当left小于等于宽度时  left++

		if(i<=lr){

			lr=800;

			i++;

		}

		//当top大于宽度时  top--

		if(j>tb){

			tb=0;

			j--;

		}

		//当left小于等于宽度时  left++

		if(j<=tb){

			tb=300;

			j++;

		}

		//停止按钮函数

		stop.onclick=function(){

			//clearInterval停止setInterval循环

			clearInterval(time);

			//修改按钮显示隐藏

			stop.style.display='none';

			start.style.display='inline';

		}

	},5);//1000毫秒=1秒   内容运动一次时间

	}

	</script>

</body>

</html>

javascript 广告移动特效的更多相关文章

  1. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  2. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  3. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  4. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

  5. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  6. javascript图片展示墙特效

    查看效果:http://hovertree.com/code/javascript/pwl4bhoi.htm 代码如下: <!DOCTYPE html> <html> < ...

  7. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  8. javascript学习-原生javascript的小特效（改变透明度效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...

  9. javascript学习-原生javascript的小特效（简单的运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

随机推荐

  1. Dapper inner join

    Dapper中的一些复杂操作和inner join应该注意的坑 上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相 ...

  2. Solr4.8.0源码分析(5)之查询流程分析总述

    Solr4.8.0源码分析(5)之查询流程分析总述 前面已经写到,solr查询是通过http发送命令,solr servlet接受并进行处理.所以solr的查询流程从SolrDispatchsFilt ...

  3. Node.js模块 加载笔记

    //核心模块就是Node.js标准API种提供的模块,如fs,http,net.vm等.官方提供,编译成二进制代码//核心模块拥有最高的加载优先级 //文件模块则是存储为单独的文件(或文件夹)的模块, ...

  4. 初识Java反射机制

    1.ClassLoader的类加载机制:并非一次性加载,而是需要的时候加载(运行期间动态加载)(Class文件加载到内存的代码段),static语句块在加载后执行一次.dynamic语句块(就是一个语 ...

  5. （2015年郑州轻工业学院ACM校赛题） G 矩阵

    看这道题的时候就感觉用一点动归思想+暴力 就能过了. #include<stdio.h> #include<iostream> #include<stack> #i ...

  6. 多线程同步、异步（BeginInvoke）

    一.线程的基础知识 1 System.Threading.Thread类 System.Threading.Thread是用于控制线程的基础类,通过Thread可以控制当前应用程序域中线程的创建.挂起 ...

  7. Scala 编程（一）Scala 编程总览

    Scala 简介 Scala 属于“可伸展语言”,源于它可以随使用者的需求而改变和成长.Scala 可以应用在很大范围的编程任务上,小到脚本大到建立系统均可以. Scala 跑在标准 Java 平台上 ...

  8. thead、tbody、tfoot与顺序无关

    今天发现一个问题,thead.tbody.tfoot等标签的内容排版与顺序无关,做了一个小的实验:

  9. ActionScript通用开发框架

    ActionScript 3(简称as)自2006年诞生以来,出现了一大批很优秀框架.就我的知识领域,运用包括pureMVC.pushButton Engine(组件框架).Robotlegs.Ash ...

  10. Android批量图片载入经典系列——使用LruCache、AsyncTask缓存并异步载入图片

    一.问题描写叙述 使用LruCache.AsyncTask实现批量图片的载入并达到下列技术要求 1.从缓存中读取图片,若不在缓存中,则开启异步线程(AsyncTask)载入图片,并放入缓存中 2.及时 ...