利用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. react-native-picker 实现省市区 时间日期组件

    github示例以及详细参数:https://github.com/beefe/react-native-picker 先 安装 link npm install react-native-picke ...

  2. hive基础操作

    hive --version  查看hive的版本 hive -S -e "set" | grep auto  ##在shell下可以查找属性的状态.小技巧.

  3. APP-6-百度地图导航

    1.代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  4. javascript _ajax 原理 初级

    1.1使用php 方式获取时间:写一个time.php文件,保存在test 文件夹中 <!DOCTYPE html> <html lang="en"> &l ...

  5. Java IO流学习总结七:Commons IO 2.5-FileUtils

    在上面的几篇文章中,介绍了IO的常规用法,今天介绍 Commons IO 框架的使用. Commons IO简介 Apache Commons IO是Apache基金会创建并维护的Java函数库.它提 ...

  6. ReactiveX 学习笔记(12)调度器

    Schedulers, threading and testing 本文的主题为调度器,多线程以及测试. RxJava操作符(六)Utility SubscribeOn / ObserveOn Sub ...

  7. springboot 项目 注意事项

    SpringBoot出现下列错误. Your ApplicationContext is unlikely to start due to a @ComponentScan of the defaul ...

  8. 【384】reduce归纳、map映射、filter筛选 的用法

    参考:4. Map, Filter and Reduce — Python Tips 0.1 documentation 参考:Python的functools.reduce用法 Map:映射,对于列 ...

  9. 16.0 Auth0注册与设置

    首先呢?注册https://manage.auth0.com 填写回调网页,意思是当我们点sign in 那个按钮的时候 会访问这个官网 这个官网又回调下面的网页,不然会报错.这个网站因为我们是开发所 ...

  10. idea git 把本地项目上传到github上

    创建一个项目,在项目文件夹下执行以下命令 第二种方法: 先在idea上创建一个项目 注意以上只是在本地建立了本地仓库,代码都放在本地仓库. 现在上传到github上 到此才上传成功