利用setInterval实现简单的滑动效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单滑动效果</title>

    <style type = 'text/css'>

        #btn {

            width:45px;

            height:25px;

        }

        #box1 {

            position:relative;

            top:15px;

            width:100px;

            height:100px;

            background:yellow;

            border:2px solid red;

        }

    </style>

</head>

<body>

    <button id="btn">提交</button>

    <div id = 'box1'>

    </div>

</body>

    <script type = 'text/javascript'>

        var box1 = document.getElementById("box1");

        var btn = document.getElementById("btn");

        var count = 0;

        var time = null;

        btn.onclick = function(){

            time = setInterval(function(){

                count += 2;

                if(count === 1000){

                    clearInterval(time);

                    box1.style.display = "none";

                }

                box1.style.left = count + "px"

            },10)

        }

    </script>

</html>

javascript简单的滑动效果的更多相关文章

  1. Javascript:简单拖拽效果的实现

    核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...

  2. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  3. 纯CSS滑动效果

    原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...

  4. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  5. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  7. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  9. Android 滑动效果入门篇（二）—— Gallery

    Gallery 是Android官方提供的一个View容器类,继承于AbsSpinner类,用于实现页面滑动效果. 从上面的继承关系可以看出,AbsSpinner类继承自AdapterView,因此我 ...

随机推荐

  1. Spring boot 日志

    修改spring boot 默认日志的配置 #logging.path= # 不指定路径在当前项目下生成springboot.log日志 # 可以指定完整的路径: #logging.file=G:/s ...

  2. Others-大数据平台Lambda架构浅析（全量计算+增量计算）

    大数据平台Lambda架构浅析(全量计算+增量计算) 2016年12月23日 22:50:53 scuter_victor 阅读数:1642 标签: spark大数据lambda 更多 个人分类: 造 ...

  3. THE BOX MODEL

    Review In this lesson, we covered the four properties of the box model: height and width, padding, b ...

  4. Servlet基本_初期化パラメータ、外部ファイル

    1.サーブレットの初期化パラメータサーブレットの初期化パラメータを利用するには.必ずweb.xmlにおいてサーブレットマッピングを指定する必要がある.(Tomactのinvokerサーブレットは利用で ...

  5. 尚硅谷springboot学习3-helloworld程序

    1.环境准备 –jdk1.8:Spring Boot 推荐jdk1.7及以上:java version "1.8.0_112" –maven3.x:maven 3.3以上版本:Ap ...

  6. UNITY2018.3 在editor下运行时new memoryprofiler显示 shader占用内存很大的问题在安卓上并没有看到

    在安卓机上完全看不到shader占用的内存,但问题是,shader在安卓上真的几乎不占用内存了?(我们的游戏中只使用了mobile下的shader) 参考下面这个文章,说是真机上也有: Unity3D ...

  7. Easy-to-Learn English Travel Phrases and Vocabulary!

    Easy-to-Learn English Travel Phrases and Vocabulary! Share Tweet Share Tagged With: Real Life Englis ...

  8. HTTPS好文推荐

    认真看完这几篇文章,HTTPS相关内容应该就能大概了解了. 1.https(ssl)协议以及wireshark抓包分析与解密 2.数字证书原理 3.也许,这样理解HTTPS更容易 4.SSL/TLS原 ...

  9. Oracle重建表空间操作实例

    由于环境维护或者性能测试需要,经常需要对表空间进行重建操作.重建表空间操作主要分3中情况介绍,分别是业务表空间.临时表空间和回滚段表空间的重建. 重建业务表空间 由于业务规划要求,重建后的业务表空间名 ...

  10. Excel导入oracle的几种方法

    http://www.jb51.net/list/list_154_1.htm 方法一.使用SQL*Loader这个是用的较多的方法,前提必须oracle数据中目的表已经存在.大体步骤如下:1.将ex ...