<!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. 配置linux平台下基于vim的开发环境

    一.vim的基本配置 1.配置文件的位置在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录($HOME)下,都可以自己建立私有的 ...

  2. 转:FIFO的定义与作用

    一.先入先出队列(First Input First Output,FIFO)这是一种传统的按序执行方法,先进入的指令先完成并引退,跟着才执行第二条指令. 1.什么是FIFO? FIFO是英文Firs ...

  3. Web日志分析

    http://www.rising.com.cn/newsletter/news/2013-03-20/13380.html https://www.trustwave.com/Resources/S ...

  4. poj 3686 The Windy's

    http://poj.org/problem?id=3686 #include <cstdio> #include <cstring> #include <algorit ...

  5. Keil C51中变量和函数的绝对地址定位问题

    1.变量绝对地址定位 1) 在定义变量时使用 _at_ 关键字加上地址就可. unsigned char idata myvar _at_ 0x40;  把变量 myvar 定义在 idata 的 0 ...

  6. 【HDOJ】4985 Little Pony and Permutation

    水题. #include <cstdio> #define MAXN 100005 int buf[MAXN], n; int main() { int i, j, k; while (s ...

  7. Android之路-------传说中的大喇叭(广播接收器)

    前言 没想到离上一篇博文的时间已经有一个多星期了,时间真的不等人啊,在这里LP告诉你们一个道理,如果现在有谁正在看管理时间的书,那么请你们把这些书放下吧,看了也没有用,因为时间我们根本管不了,我们只能 ...

  8. 一个强大的LogParser的UI工具--logparserlizard简介(开源IIS日志分析工具)

    原文地址:http://blog.csdn.net/downmoon/article/details/4509513 日志分析,特别是IIS日志,一般人都会想到LogParser工具,的确很强.但是命 ...

  9. has-a关系——多重私有继承

    #ifndef _STUDENT_H_ #define _STUDENT_H_ #include <iostream> #include <string> #include & ...

  10. 本地apt

    Ubuntu建立本地源非常實用,很多服務器在局域網沒有網络或者網络很慢的情況下,或者需要批量安裝同样的軟件的時候,如果每一台服務器都去外網下載,是不是很慢,而且也不是一個運維工程師願意這麼幹的!那有什 ...