<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var minheight = 20;
var maxheight = 300;
var time = 500;
var timer = null;
var toggled = false;

window.onload = function () {
var controler = document.getElementById('slide');
var slider = document.getElementById('slider');
slider.style.height = minheight + 'px';
controler.onclick = function () {
clearInterval(timer);
var instanceheight = parseInt(slider.style.height);
var init = (new Date()).getTime();
var height = (toggled = !toggled) ? maxheight : minheight;

var disp = height - parseInt(slider.style.height);
timer = setInterval(function () {
var instance = (new Date()).getTime() - init;
if (instance < time) {
var pos = Math.floor(disp * instance / time);
result = instanceheight + pos;
slider.style.height = result + 'px';
document.getElementById('log').innerHTML = 'Current Height : <b>' + result + '</b><br /> Current Time : <b>' + instance + '</b>';
} else {
slider.style.height = height + 'px'; //safety side ^^
clearInterval(timer);
controler.value = toggled ? ' Slide Up ' : ' Slide Down ';
document.getElementById('log').innerHTML = 'Current Height : <b>' + height + '</b><br /> Current Time : <b>' + time + '</b>';
}
}, 1);
};
};
</script>
</head>
<body>
<h1>
test
</h1>
<input type="button" id="slide" value=" Slide Down " />
<span id="log" style="position: absolute; left: 10px; top: 150px;"></span>
<br />
<div id="slider" style="background-color: green;">
content goes here
</div>
<div style="height: 20px; width: 100%; background-color: Gray;">
</div>
</body>
</html>

纯js滑动脚本的更多相关文章

  1. 纯js脚本操作excel

    纯js脚本解析excel,并渲染为htm表格,投放大屏并滚动! 代码:https://github.com/tianbogit/js_excel

  2. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  3. JavaScript--动态添加元素（纯js书写table并删除数据）

    本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...

  4. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  5. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  6. [No00007A]没有文件扩展".js"的脚本引擎 解决办法

    在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...

  7. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  8. JS滑动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

随机推荐

  1. rtmpdump代码分析 转

    RTMPdump 源代码分析 1: main()函数 rtmpdump 是一个用来处理 RTMP 流媒体的工具包,支持 rtmp://, rtmpt://, rtmpe://, rtmpte://, ...

  2. PHPCMS v9构建模块

    ■补课: 1.phpcms v9帮助文件,上面会写关于二次开发的一些方法. http://v9.help.phpcms.cn/ 2.找一个后台还没安装的模块,先把代码看一边.比如dianping模块 ...

  3. haslayout和BFC

    感谢CSS涛的分享,参考文章: (1)haslayout:http://aibusy.com/blog/?p=53 (2)BFC 神奇背后的原理:http://aibusy.com/blog/?p=8 ...

  4. JS函数定义与匿名函数的调用

    一.函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字 声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName ...

  5. php 编译安装选项

    ./configure --prefix=/usr/local/php/ --with-config-file-path=/etc/php5/cli/ --with-config-file-scan- ...

  6. 转：成为JavaGC专家Part I — 深入浅出Java垃圾回收机制

    文章来自于:http://www.importnew.com/1993.html 对于Java开发人员来说,了解垃圾回收机制(GC)有哪些好处呢?首先可以满足作为一名软件工程师的求知欲,其次,深入了解 ...

  7. 转：virtualbox+ubuntu设置共享文件夹

    1.       进入系统,安装增强功能,安装完关闭系统. 2.       在E盘下创建一个共享文件夹 gongxiang. 3.       设置->数据空间->固定分配,选择共享文件 ...

  8. android上传图片至服务器

    本实例实现了android上传手机图片至服务器,服务器进行保存 服务器servlet代码publicvoid doPost(HttpServletRequest request, HttpServle ...

  9. 数据加密算法---base64

    简介 base64是把8位字符打散,转换成不被人直接识别的形式,严格来说它并不是加密算法,只能算做一种编码方式 原理 首先准备64个字符数组做为“数组库” ['A', 'B', 'C', ... 'a ...

  10. HDU4436---str2int 后缀树组（12年天津区域赛）

    str2int Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...