利用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. Python运算符,基本数据类型

    1,基本的运算符: 加,减,乘,除 取余(%)   取商(//)   **(幂) in    not in (判断是否在里面) 1.运算符        结果是值            算数运算   ...

  2. 【Noip模拟 20161005】公约数

    问题描述 小ww最近仔细研究了公约数,他想到了以下问题:现有nn个正整数,从中选k(2≤k≤n)k(2≤k≤n) 个,设这kk个数的最大公约数为gg,则这kk个数的价值为k×gk×g.求这个价值的最大 ...

  3. delphi dxBarManager 的dxBarEdit 输入问题

    Developer Express 6 想做像office2007那样界面. 问题:dxBarManager1 里面添加了cxBarEditItem1 这是个文本框,运行可以输入内容,但是当焦点失去时 ...

  4. 关于AB包的释放与 Resources.UnloadUnusedAssets的关系

    Resources.UnloadUnusedAssets 并不能释放AB包中东西,只能释放从AB包中加载出来的资源,也可以释放场景中的资源,其它不是从AB包加载来的资源. AB加载后,整个包都加载到内 ...

  5. Haskell语言学习笔记（72）Free Monad

    安装 free 包 $ cabal install free Installed free-5.0.2 Free Monad data Free f a = Pure a | Free (f (Fre ...

  6. Python操作远程服务器paramiko模块介绍

    paramiko模块是基于Python实现的SSH远程安全连接,可以提供在远程服务器上执行命令.上传文件到服务器或者从指定服务器下载文件的功能. paramiko模块安装方法 paramiko模块不是 ...

  7. 生产者消费者 wait（）。 notify（）

    public class ThreadDemo3 { public static void main(String[] args){ MyList list = new MyList(); Produ ...

  8. Java复习 之流

    在Java程序中 对于数据的输入/输出操作以“流”方式进行:提供了各种各样的流类,用以获取各种不同的种类的数据,程序中通过标准的方法输入或输出数据 Inputstream 例子1: 但是中文会乱码 应 ...

  9. Structs复习 Result第一部分

    Jar包 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=&q ...

  10. C++ : 窗口变化相关消息 OnSize、OnSizing和OnGetMinMaxInfo，onsizeonsizing

    个消息分别是:WM_SIZE.WM_SIZING.WM_GETMINMAXINFO:分别对应相应的处理函数:OnSize.OnSizing.OnGetMinMaxInfo. 当窗口大小发生变化时,响应 ...