利用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. Oracle事务隔离级别

    转自:https://blog.csdn.net/leozhou13/article/details/50449965

  2. Oracle 学习总结 - 物理结构

    参考了很多文章,学习自网络 数据库 = 实例(数据库启动时初始的进程和内存结构,进程会作用到对应的内存区域-数据写入器到写入内存缓冲区,日志写入器到日志缓冲区等) + 数据库(物理文件-控制文件,数据 ...

  3. 尚硅谷redis学习2-redis的安装和HelloWorld

    Reids: remote dictionary server redis特点:支持持久化,支持复杂数据类型,支持备份 下载: 解压: 执行make, make install 可能会需要安装make ...

  4. 【x】 PAT/BasicLevel_C++/1002. 写出这个数 (20).cpp

    C++中的to_string()函数[C++11支持] - Bravo Yeung-羊较瘦之自留地 - CSDN博客https://blog.csdn.net/lzuacm/article/detai ...

  5. Shell条件表达式

    Shell编程中经常需要判断文件状态.字符串是否相等以及两个数值大小等情况,基于这些比较结果再做执行相关操作.本文主要讲述文件状态.字符串.数值大小的判断比较方法. 文件状态判断 文件状态的判断通常使 ...

  6. ORA-00600: internal error code, arguments: [4193]问题解决

    操作环境 SuSE+Oracle11gR2 问题现象 单板宕机自动重启后,ORACLE运行不正常,主要表现如下: 1.执行shutdown immedate停止数据库时,提示ORA-00600: in ...

  7. vscode vue 格式化 和emmet 提示

    ctrl+shift+p打开用户默认设置 设置vetur插件 "vetur.validation.template": false, "vetur.format.defa ...

  8. 侧边栏收起展开效果，onmouseover,onmouseout

    //方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  9. java的acm输入输出格式+大数语法

    1.类名称必须采用public class Main方式命名 2.多组输入,读取到文件尾 Scanner scan=new Scanner(System.in); while(scan.hasNext ...

  10. SQL server 2012完全删除

    第一步,在控制面板里面找到程序——卸载程序这一项,打开之后就会是这样的了 第二步,经过第一步打开卸载程序后,在里面找到Microsoft SQLserver 2012 (64-bit)这一项,可以通过 ...