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 广告移动特效的实现代码全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 #Javascript
You might like
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
python 实现堆排序算法代码
2012/06/05 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python集合常见运算案例解析
2019/10/17 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
sklearn的predict_proba使用说明
2020/06/28 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
前台文员个人求职信范文
2014/01/05 职场文书
大学班级计划书
2014/04/29 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
经济贸易系求职信
2014/08/04 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
领导欢迎词范文
2015/01/26 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python