<!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. oracle创建、删除索引等操作

    1.创建索引 create index 索引名 on 表名(列名); 2.删除索引 drop index 索引名; 3.创建组合索引 create index 索引名 on 表名(列名1,,列名2); ...

  2. 五分钟学Java：打印Java数组最优雅的方式是什么？

    在逛 Stack Overflow 的时候,发现了一些访问量像‎安第斯山一样高的问题,比如说这个:打印 Java 数组最优雅的方式是什么?访问量足足有 220W+,想不到啊,这么简单的问题竟然有这么多 ...

  3. HTML5 canvas自制画板

    找到一个画板的插件,很好用,点击下载  ,页面很简单,但是呢,貌似不适用于手机端,,,

  4. 不需要图片，css+svg绘制动态loading加载图标

    1.html 部分: <div id="refershDiv" class="refershDiv"> <svg xmlns="ht ...

  5. 201771010135 杨蓉庆《面对对象程序设计（java）》第十七周学习总结

    1.实验目的与要求 (1) 掌握线程同步的概念及实现技术: (2) 线程综合编程练习 一.理论知识 ⚫ 线程同步 (1)多线程并发运行不确定性问题解决方案:引入线 程同步机制,使得另一线程要使用该方法 ...

  6. MAC Address-Table Move Update Feature

    MAC Address-Table Move Update The MAC address-table move update feature allows the switch to provide ...

  7. MySQL 5.5.62 安装方法（标准配置版）

    1.此安装方法适用于绝大多数MySQL版本,首先在MySQL官网上下载好所需版本. 2.(官网可能不太好找)在我的博客列表中有一篇是MySQL官网下载链接,直达下载界面,方便. 3.下载.(安装版  ...

  8. oracle错误代码大全(超详细)

    本篇文章是对oracle错误代码进行了详细的总结与分析,需要的朋友参考下 ORA-00001: 违反唯一约束条件 (.)ORA-00017: 请求会话以设置跟踪事件ORA-00018: 超出最大会话数 ...

  9. Windows Server 2012 R2 自动映射公共网络驱动器

    1.创建组织单位,在组织单位新建用户或者组 2.新建文件夹(名字无所谓,我这里起名一样方便测试) 3.对文件夹开启共享,设置要共享的用户或者组 4.打开组策略,找到对应的组织单位 5.创建GPO 6. ...

  10. 记录我对'我们有成熟的时间复杂度为O(n)的算法得到数组中任意第k大的数'的误解

    这篇博客记录我对剑指offer第2版"面试题39:数组中出现次数超过一半的数字"题解1的一句话的一个小误解,以及汇总一下涉及partition算法的相关题目. 在剑指offer第2 ...