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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
javascript解析json数据的3种方式
May 08 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
简单实现PHP留言板功能
2016/12/21 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
JavaScript之解构赋值的理解
2019/01/30 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python交互界面的退出方法
2019/02/16 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
综治工作心得体会
2014/09/11 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
淘宝好评语句大全
2014/12/31 职场文书
实施意见格式范本
2015/06/05 职场文书
个人催款函范文
2015/06/24 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
Python必备技巧之函数的使用详解
2022/04/04 Python