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 相关文章推荐
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
VeeValidate 的使用场景以及配置详解
Jan 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选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 #Javascript
You might like
PHP中的array数组类型分析说明
2010/07/27 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈React中组件间抽象
2018/01/27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python内建模块struct实例详解
2018/02/02 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
用Python配平化学方程式的方法
2019/07/20 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
函授大学生自我鉴定
2014/02/05 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
检讨书怎么写
2015/05/07 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书