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

<!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 广告移动特效的实现代码全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

  • js实现跟随鼠标移动且带关闭功能的图片广告实例

    本文实例讲述了js实现跟随鼠标移动且带关闭功能的图片广告.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • js实现全屏漂浮广告移入光标停止移动

    复制代码 代码如下: <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS全屏漂浮广告</title><style type="text/css">div#roll{width:100px;height:10

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

    <!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;

  • JavaScript 实现下雪特效的示例代码

    JavaScript 实现下雪特效的示例代码

    直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下雪效果实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type=

  • 基于javascript实现放大镜特效

    基于javascript实现放大镜特效

    本文实例为大家分享了javascript实现放大镜特效的具体代码,供大家参考,具体内容如下 我们在逛pc端商城时,鼠标放到商品上经常会看到一个类似放大镜效果的蒙层, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0px;

  • JavaScript实现烟花特效（面向对象）

    本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下 本特效使用面向对象编程 分析 OOA 点击触发事件 烟花运动分成两个阶段 向上飞          爆炸 OOD class FireWork{ constructor(){ } bindEvent(){ let _this = this; ele.onclick = function(){ //fly结束再去调用boom函数 _this.fly(_this.boom); } } fly(boom){ }

  • JavaScript实现烟花特效(面向对象)

    本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下 本特效使用面向对象编程 分析 OOA 点击触发事件 烟花运动分成两个阶段 向上飞           爆炸 OOD class FireWork{ constructor(){ } bindEvent(){ let _this = this; ele.onclick = function(){ //fly结束再去调用boom函数 _this.fly(_this.boom); } } fly(boom){ }

  • JavaScript实现时钟特效

    本文实例为大家分享了JavaScript实现时钟特效的具体代码,供大家参考,具体内容如下 简单时间实现: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.ge

  • JavaScript+CSS相册特效实例代码

    JavaScript+CSS相册特效实例代码

    嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

  • JavaScript下拉菜单功能实例代码

    本文给大家分享一段实例代码关于js实现下拉菜单功能,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo

  • 基于JavaScript实现弹幕特效

    基于JavaScript实现弹幕特效

    本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&

  • JavaScript图片放大技术(放大镜)实现代码分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐