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触发器详解
Mar 10 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 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学习 函数 课件
2008/06/15 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
vue实现页面切换滑动效果
2020/06/29 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
担保书格式及范文
2014/04/01 职场文书
销售内勤岗位职责
2014/04/15 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
圣诞节开幕词
2015/01/29 职场文书
区域销售大会开幕词
2016/03/04 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python