编程 Javascript

javascript 广告移动特效的实现代码

Posted in Javascript onJune 25, 2016

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box2{}
    .box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;}
    .box3{width: 800px; height: 500px; border:1px solid red;}
  </style>
</head>
<body>
<button type="" id="start">开始</button>
<button type="" id="stop">停止</button>
<div class="box3">
  

  <div id="box" class="box2">
    
  </div>
  </div>
</body>
<script type="text/javascript">
  var lr=600;
  var tb=300;
  var i=0;
  var j=0;

  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';
    var time=setInterval(function(){
      box.style.left=i+'px';
      box.style.top=j+'px';
      if (i>lr) {
        lr=0;
        i--;
      }
      if(i<=lr){
        lr=600;
        i++;
      }
      if (j>tb) {
        tb=0;
        j--;
      }
      if (j<=tb) {
        tb=300;
        j++
      }
      stop.onclick=function(){
        clearInterval(time);
        stop.style.display='none';
        start.style.display='inline';
      }
    },5);

  }
</script>
</html>

以上就是小编为大家带来的javascript 广告移动特效的实现代码全部内容了，希望大家多多支持三水点靠木~

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

对YUI扩展的Gird组件 Part-1

Mar 10 Javascript

JavaScript判断一个URL链接是否有效的实现方法

Oct 08 Javascript

基于jquery实现的定时显示与隐藏div广告的实现代码

Aug 22 Javascript

javascript检查浏览器是否支持flash的实现代码

Aug 14 Javascript

jQuery实现的图片分组切换焦点图插件

Jan 06 Javascript

javascript设计模式之策略模式学习笔记

Feb 15 Javascript

JS实现的简单拖拽功能示例

Mar 13 Javascript

Angularjs使用指令做表单校验的方法

Mar 31 Javascript

ES6新特性之类(Class)和继承(Extends)相关概念与用法分析

May 24 Javascript

JavaScript事件对象event用法分析

Jul 27 Javascript

angular中子控制器向父控制器传值的实例

Oct 08 Javascript

VSCode 配置uni-app的方法

Jul 11 Javascript

jQuery+CSS3文字跑马灯特效的简单实现

Jun 25 #Javascript

解析JavaScript中的字符串类型与字符编码支持

Jun 24 #Javascript

JavaScript程序中实现继承特性的方式总结

Jun 24 #Javascript

JavaScript编程中实现对象封装特性的实例讲解

Jun 24 #Javascript

JS全局变量和局部变量最新解析

Jun 24 #Javascript

jQuery插件passwordStrength密码强度指标详解

Jun 24 #Javascript

jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍

Jun 24 #Javascript