<!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. 【常见浏览器的UA】

    "所谓 UA(User Agent / 用户代理),最初是指浏览器告知网站管理员,本浏览器支持的类型和框架,让网站管理员以支持的模式结构向浏览器发送页面,呈现给用户浏览.演变到今天,网站管理 ...

  2. 洛谷 P3901 数列找不同（莫队）

    题目链接:https://www.luogu.com.cn/problem/P3901 这道题简单莫队模板题,然后$add$和$del$分别处理$vis[]$从$0-->1$和从$1--> ...

  3. 6_8 树（UVa548）<从中序和后序恢复二叉树>

    你的任务是找出一棵二叉树中最小路径上终端节点(树叶,leaf node)的值.所谓路径乃指从根节点(root)旅行到任一终端节点.路径的值为所经过的节点的值的和(包含根节点及终端节点).而最小路径就是 ...

  4. 创建Maven project 提示pom.xml 首行错误

    背景 使用eclipse创建Maven SpringBoot 2.2.0 项目时报错,更换springboot 版本也不行,排除框架依赖原因.然后别人的eclipse创建的同样2.2.2 maven项 ...

  5. JAVA基础学习（3）之循环

    3循环 3.1循环 3.1.1循环 一直要做的行为进行循环 3.1.2数数字 while(){}判断是否进行 数数字:number/10 //数数字Scanner in = new Scanner(S ...

  6. nginx 解决 connect() failed (111: Connection refused) while connecting to upstream,

    嗯哼,刚装了个ubuntu的lnmp,我的天啊,踩的坑比我脂肪还多了 比如刚装完的时候访问显示502, 也不知道什么问题,就去看了一下nginx日志  /var/log/nginx/error.log ...

  7. Floyd-Warshall

    Description 第一行四个数为n,m,n表示顶点个数,m表示边的条数. 接下来m行,每一行有三个数t1.t2 和t3,表示顶点t1到顶点t2的路程是t3.请注意这些t1->t2是单向的. ...

  8. <img>标签在vue中的使用

    定义和用法 onerror 事件会在文档或图像加载过程中发生错误时被触发. 在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄. 实例 加载缩略图 <img :src="'/x ...

  9. Python实现重命名一个文件夹下的图片

    在网上查了一下python实现的图片重命名,工作中刚好用一下. # -*- coding:utf8 -*- import os path = '新建文件夹 (2)/' filelist = os.li ...

  10. 【C语言】输入一个年份和月份，输出该月的天数

    分析: 三种类型, A.2月比较特殊,平年的2月只有28天,而闰年的2月有 29 天: B.4.6.9.11月: C.其他1.3.5.7.8.10.12月. 代码: /*输入一个年份和月份,输出该月的 ...