<!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. apache_fileupload实现文件上传_上传多个文件

    1.导包 核心类: DiskFileItemFactory – 设置磁盘空间,保存临时文件.只是一个具类. ServletFileUpload  - 文件上传的核心类,此类接收request,并解析r ...

  2. ubuntu 14.0 下github 配置

    一:创建Repositories 1:首先在github下创建一个帐号.这个不用多说,然后创建一个Repositories. 2:然后在ubuntu下安装git相关的东东: 1 sudo apt-ge ...

  3. vim编辑器中撤销和恢复操作

    在VIM编辑器下切换至命令行模式: 撤销: u 恢复: ctrl + r

  4. NVIDIA 显卡温度提示过高,显卡温度高99度怎么办？

    你可能没有在意您的NVIDIA(英伟达)显卡温度,那么你就不会知道显卡温度过高如何导致的呢?也不会知道如果去解决显卡温度过高的问题了,在此我希望在电脑玩游戏或者在办公中电脑速度快慢,或者发热的情况下, ...

  5. ionic ng-src 在网页显示，但是导出apk在android手机中运行不显示图片

    解决方法参照: http://stackoverflow.com/questions/29896158/load-image-using-ng-src-in-android-ionic-aplicat ...

  6. win8.1（64位） apache2.4.3+php5.6.3+mysql5.6安装

    win8.1(64位) apache2.4.3+php5.6.3+mysql5.6安装 http://blog.csdn.net/jiangzeyun/article/details/41676639

  7. the smallest positive number

    2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any rema ...

  8. 在Activity的生命周期中，会被系统回调的方法

    onCreate(Bundle savedStatus):创建Activity时被回调.onStart():启动Activity时被回调.onRestart():重新启动Activity时被回调.on ...

  9. python word操作深入

    python 把word转html:上传页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  10. Android ImageView的scaletype属性

    ImageView的属性android:scaleType,即 ImageView.setScaleType(ImageView.ScaleType).android:scaleType是控制图片如何 ...