<!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. CentOS7修改主机名的三种方法

    在CentOS7中,有三种定义的主机名: 静态的(Static hostname) “静态”主机名也称为内核主机名,是系统在启动时从/etc/hostname自动初始化的主机名. 瞬态的(Tansie ...

  2. laravel框架学习笔记

    一.laravel的安装 1.composer 作用:主要管理php中的依赖关系(类似于yum源) 可以安装的软件: curl    //主要用到微信开发中 upload //文本操作 excel / ...

  3. 接口测试，如何构建json类型的参数值

    1.json类型参数传入,实际传输的时候是转化为一中字符串类型的格式,所以如data=”{}”,该参数用引号包含传入,“{}”里面的key都应该为双引号,value为字符串的也应该是双引号,最后一个v ...

  4. HTTPS 学习

    问题 数字签名的作用是什么? 为什么 HTTPS 是安全的 CA存在的动机是什么 客户端的公钥的都是一致的吗? 概述 这一节我们将要讲HTTPS,为什么说HTTPS是安全的,而HTTP是不安全的呢,这 ...

  5. 更改yii框架入口文件位置，修改前后端访问路径

    将frontend/web/index.php复制到项目根目录,修改为: <?php defined('YII_DEBUG') or define('YII_DEBUG', true); def ...

  6. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真（07）

    今天主要解决一下defect语句: defect region=1 nta=1.55e20 wta=0.013 wtd=0.12 ngd=6.5e16 wga=2 ntd=1.55e20 ngd=0 ...

  7. contextField 键盘只允许输入数字和小数点，并且现在小数点后位数

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  8. Ansible playbooks（任务、角色、模板、变色器、）

    playbooks配置文件: [root@ansible ~]# vim /etc/ansible/hosts [test01] 192.168.200.114 [test02] 192.168.20 ...

  9. 「BZOJ4548」小奇的糖果

    传送门 memset0好评 解题思路 比较恶心的一道数据结构题 看一眼题面,马上想到离散化. 然后将一维排序,另一维用树状数组或者线段树维护. 然后就没思路了 发现一个性质: 不包含所有的颜色,当然要 ...

  10. 「题解」「JOISC 2014 Day1」历史研究

    目录 题目 考场思考 思路分析及标程 题目 点这里 考场思考 大概是标准的莫队吧,离散之后来一个线段树加莫队就可以了. 时间复杂度 \(\mathcal O(n\sqrt n\log n)\) . 然 ...