利用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. [手把手教你] 用Swoft 搭建微服务(TCP RPC)

    序言 Swoft Framework 基于 Swoole 原生协程的新时代 PHP 全栈式协程框架 Swoft 是什么? Swoft 框架是首个基于Swoole 原生协程的新时代 PHP高性能协程全栈 ...

  2. 抓取mooc中国随笔

    // $url = "http://www.baidu.com/"; $url= "https://www.icourse163.org/web/j/courseBean ...

  3. 开发MIS系统的相关技术

    Java Web应用的核心技术包括以下几个方面:● JSP:进行输入和输出的基本手段.● JavaBean:完成功能的处理.● Servlet:对应用的流程进行控制.● JDBC:是与数据库进行交互不 ...

  4. javascript 中的 innerHTML 是什么意思

    innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容:如:<div id="aa">这是内容</div> ,我们可以通过 document ...

  5. Zabbix点滴记录

    转自 眄眄的闺蜜 简单检查中的icmppingloss[<target>,<packets>,<interval>,<size>,<timeout ...

  6. GIS案例学习笔记-多边形内部缓冲区地理模型

    GIS案例学习笔记-多边形内部缓冲区地理模型 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:对于多边形,建立内部缓冲区. 问题:ArcGIS缓冲工具不支持内部 ...

  7. sql server连接字符串与tcp/ip开启

    连接字符串1:Data Source=localhost,1433;User ID=sa;Password=123;Initial Catalog=test;Min Pool Size=1;Max P ...

  8. C# windows服务：通过cmd命令安装、卸载、启动和停止Windows Service（InstallUtil.exe）

    步骤: 1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft ...

  9. Monkey测试结果分析【转】

    转自[http://www.douban.com/note/257030241/] Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1. 找到是 ...

  10. Pandas分类

    Pandas分类 categorical data是指分类数据:数据类型为:男女.班级(一班.二班).省份(河北.江苏等),若使用赋值法给变量赋值,例如(男=1,女=0),数字1,0之间没有大小之分, ...