<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}

    </style>

    <script>

    window.onscroll=function()

    {

        var oDiv=document.getElementById('div1');

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        //alert(document.documentElement.clientHeight);

        //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

        //alert(document.documentElement.clientHeight);

        //document.title=oDiv.offsetHeight;

        //alert(oDiv.offsetHeight);

        //alert(document.documentElement.scrollTop);

        //alert(scrollTop);

        //alert(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

        startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);

    }

    var timer=null;

    function startMove(iTarget)

        {

            var oDiv=document.getElementById('div1');

            clearInterval(timer);

            timer=setInterval(function() {

                var speed=(iTarget-oDiv.offsetTop)/6;

                //alert(iTarget-oDiv.offsetTop);

                //alert(iTarget);

                //alert(speed);

                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(oDiv.offsetHeight==iTarget)

                    {

                        clearInterval(timer);

                    }

                else

                    {

                        oDiv.style.top=oDiv.offsetTop+speed+'px';

                    }

            },30);

        }

    </script>

</head>

<body style="height:2000px;">

<div id="div1"></div>

</body>

</html>

js缓慢滑块的更多相关文章

  1. Eclipse保存验证JS缓慢

    EclipseSave保存js文件的时候验证JS的时间很长( 使用extjs).Eclipse – Validation – JavaScript Validator 的 Manual和Build都没 ...

  2. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  3. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

  4. 手机端js实现滑块推动

    代码编写:(写的格式有点差,凑合看吧,但是功能是实现了的) <html><head><meta http-equiv="Content-Type" c ...

  5. js手机滑块模仿

    点击文本框滑动选值 手机屏幕上的上下翻滚菜单使用JS实现.经过十几个小时的折磨,终于有了最初版本.实现办法如下描述: 一.要求和方法 1.一个input输入框,点击后弹出一个翻滚菜单盖在其上,翻滚选好 ...

  6. JS——缓慢动画封装

    在知道如何获取内嵌式和外链式的标签属性值之后,我们再次封装缓慢动画: 单个属性 <!DOCTYPE html> <html> <head lang="en&qu ...

  7. JS拖动滑块验证

    使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作. 实现思路: 1.获取silde滑块(获取元素) 2.为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标 ...

  8. js 实现滑块效果

    var dd = $(".drag_bott").removeAttr('id').last().attr('id','drag_bott'); var drag = docume ...

  9. JS——缓慢动画封装案例

    手风琴 1.排他思想 2.ul宽度需要大一点,防止li撑开跑下去 3.一个变大其他所有变小,变小不能太小,不然会出现空白 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. Codeforces Round #618 (Div. 1)A（观察规律）

    实际上函数值为x&(-y) 答案仅和第一个数字放谁有关 #define HAVE_STRUCT_TIMESPEC #include <bits/stdc++.h> using na ...

  2. 1042B. Vitamins

    Berland shop sells nn kinds of juices. Each juice has its price cici. Each juice includes some set o ...

  3. mtrace 简介

    内存泄露问题一般会再长时间运行的程序中暴露出来.而且一般很难定位和查找. linux 提供mtrace/muntrace来检测程序是否有内存泄露.一般来说要检测哪一段代码是否有内存泄露,就可以用这一对 ...

  4. 每天进步一点点------FPGA 静态时序分析模型——reg2reg

    2. 应用背景 静态时序分析简称STA,它是一种穷尽的分析方法,它按照同步电路设计的要求,根据电路网表的拓扑结构,计算并检查电路中每一个DFF(触发器)的建立和保持时间以及其他基于路径的时延要求是否满 ...

  5. Python - 反向生成UML类图

    法一. pyreverse https://www.logilab.org/blogentry/6883 pip install pylint(集成在里面了) cd pack pyreverse -o ...

  6. 读书笔记 - 把时间当作朋友 by 李笑来

    要管理的不是时间,而是自己. 摸着石头渐行渐远,最终也能过河.- 朱敏 赛伯乐(中国)投资公司 董事长 一切都靠积累,一切都可提前准备,越早醒悟越好.人的一生是奋斗的一生,但是有的人一生过得很伟大,有 ...

  7. 如何处理 Web 图片优化？

    未优化的图片是影响网站性能的主要因素之一,尤其会影响初次加载.取决于图像的分辨率和画质,图片可能占据整个网站流量的 70%. 生产环境出现未优化的图片并显著影响初次加载速度的现象还是挺常见的.缺乏经验 ...

  8. 安卓基础（AndroidViewModel）

    今天学习了AndroidViewModel,但是我根据视频上讲解,根据所讲用例,在添加依赖得时候一直报错,后来我请教大佬,他告诉我说是,因为网络得问题,国外得一些依赖有可能下不下来,所以可以下载阿里云 ...

  9. The Preliminary Contest for ICPC Asia Shanghai 2019 B Light bulbs （离散的差分）

    复杂度分析,询问一千次,区间长1e6,O(1e9)超时. 那么我们知道对于差分来说,没必要一个一个求,只需要知道区间长就可以了,所以我们定义结构体差分节点,一个头结点,一个尾节点. 这样tail.lo ...

  10. appium可通过SDK自带的uiautomatorviewer或monitor工具，来查看页面元素（Android）

    工具一:uiautomatorviewer 1.在SDK的tools目录中找到uiautomatorviewer,双击打开若出现闪退一般是jdk版本不匹配(建议安装jdk1.8的): 2.在使用这个工 ...