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获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
实例浅析js的this
Dec 11 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
Vue Router的手写实现方法实现
Mar 02 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高级编程-函数-郑阿奇
2011/07/04 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
移动端js图片查看器
2016/11/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue-父子组件和ref实例详解
2019/11/10 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
《学会待客》教学反思
2014/02/22 职场文书
端午节活动总结
2014/08/26 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2016新年慰问信范文
2015/03/25 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang