<!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. ACM的探索之Everything Is Generated In Equal Probability(这真的是很有趣的话语丫！)

    ---------------------------------------步履不停,奋勇前进! ------------------------难度真的是蛮大丫!后序补充!

  2. jmeter的BeanShell Sampler使用--导入第三方jar包

    实现目的 测试接口的过程中,可能有时需要用到第三方jar包来生成一些测试数据,此时我们就可以通过BeanShell来调用自己编写的工具类,来对jmeter的功能进行扩展,以满足测试需要. 脚本实现 在 ...

  3. Sql性能优化梳理

    前言 先简单梳理下Mysql的基本概念,然后分创建时和查询时这两个阶段的优化展开. 1.0 基本概念简述 1.1 逻辑架构 第一层:客户端通过连接服务,将要执行的sql指令传输过来 第二层:服务器解析 ...

  4. 前后端分离之 跨域和JWT

    书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...

  5. 萌新深度学习与Pytorch入门记录（一）：Win10下环境安装

    深度学习从入门到入土,安装软件及配置环境踩了不少坑,过程中参考了多处博主给的解决方法,遂整合一下自己的采坑记录. (若遇到不一样的错误,请参考其他博主答案解决) 笔者电脑系统为win10系统,在此环境 ...

  6. thinkphp 3.2链接Oracle数据库，查询数据

    ennnn,换工作了,开始用新的东西了,最近就是调用nc接口,数据库是Oracle,首先先把数据查出来,这个比较简单. 在网上看的其他的方法都是改数据库配置文件,然后需要修改tp核心的一个类文件,比较 ...

  7. php头像上传插件

    最近找到了一个比较简单实用的php头像上传插件,兼容IE8及以上等主流浏览器,分享给大家.效果如下: 1.首页效果图:默认显示默认图片. 2.点击图片(拥有裁剪框,可以拖动.缩放.裁剪头像等功能,注意 ...

  8. jvm系列（一）之内存模型

    JVM内存结构 Java内存模型是指Java虚拟机的内存模型,我们来看下Java内存模型的图片: VM内存模型主要分为三块:Java 堆内存(Heap).方法区(Non-Heap).JMV栈(JVM ...

  9. provide 和 inject高阶使用

    provide 在祖先里授权导出 inject在后代负责接收 foo可以是本组件的函数方法 或者 变量foo 也可以是祖先组件自己 祖先组件foo: this 后代组件 foo.$options.da ...

  10. 《JavaScript高级程序设计》读书笔记（三）基本概念第三小节 String、Object类型

    内容---语法 上一小节---数据类型 本小节 String类型---流程控制语句---理解函数 String类型--零个或者多个16位Unicode字符组成字符序列,即字符串--可以由双引号&quo ...