利用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. 机器学习入门-文本数据-构造Tf-idf词袋模型(词频和逆文档频率) 1.TfidfVectorizer(构造tf-idf词袋模型)

    TF-idf模型:TF表示的是词频:即这个词在一篇文档中出现的频率 idf表示的是逆文档频率, 即log(文档的个数/1+出现该词的文档个数)  可以看出出现该词的文档个数越小,表示这个词越稀有,在这 ...

  2. idea debug只断点当前线程,不阻塞其他线程

    公司前后端分离,后端人员无需编写前端js ,后端开发调试某个数据的时候,前端总是嫌弃后端断点,影响到他开发.....idea早已提供这个功能,做下记录 选中你需要调试的控制器,其他控制器不会受到影响, ...

  3. C# 中奇妙的函数–String Split 和 Join

    很多时候处理字符串数据,比如从文件中读取或者存入 - 我们可能需要加入分隔符(如CSV文件中的逗号),或使用一个分隔符来合并字符串序列. 很多人都知道使用split()的方法,但使用与其对应的Join ...

  4. vue：vue页面刷新vuex数据消失问题

    vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...

  5. keal

    I remember the wonderful moment you appeared before me, like a fleeting vision, like a genius of pur ...

  6. Linux命令:findutils

    本篇介绍Linux中常用的文件查找和定位工具,包括:find.locate.which.xargs等. GNU find 命令参考<https://www.gnu.org/software/fi ...

  7. ReactiveX 学习笔记（4）过滤数据流

    Filtering Observables 本文主题为过滤 Observable 的操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操作符(三)Filtering Deb ...

  8. TLS协议（安全传输层协议）

    概况 安全传输层协议(TLS)用于在两个通信应用程序之间提供保密性和数据完整性.该协议由两层组成: TLS 记录协议(TLS Record)和 TLS 握手协议(TLS Handshake).较低的层 ...

  9. 讲一讲Servlet的生命周期

    1 实例化    servlet 容器创建servlet的实例; 2初始化   该容器调用init()方法;   每个实例,init()方法只被调用一次 3 服务    如果请求Servlet,则容器 ...

  10. Android Studio 打包时 Signature Version 选择V1还是V2 ？

    只勾选V2会导致 7.0 以下的安卓机出现 INSTALL_PARSE_FAILED_NO_CERTIFICATES 的问题 ,推荐全选. 解决方案一v1和v2的签名使用1)只勾选v1签名并不会影响什 ...