<!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;

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

    }

    var timer=null;

    function startMove(iTarget)

        {

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

            clearInterval(timer);

            timer=setInterval(function() {

                var speed={iTarget-oDiv.offsetTop}/8;

                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. HMTL5滑动块研究

    滑动块图片 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. 6个函数的output看JS的块级作用域

    1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...

  3. JS滑动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  5. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

  6. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  7. appium java 滑动（js滑动和swipe滑动）

    最近有一个页面的内容很多,有的元素需要滑动到底部才能看到,所以就研究一下滑动,下面是我学习到的两种滑动方式 一:用js滑动 用js滑动的思路是很简单,首先是先定位到这个元素,定位到之后不做任何操作,然 ...

  8. iOS:步进UIStepper、滑动块UISlider、开关UISwitch的基本使用

    步进UIStepper.滑动块UISlider:当它们作为事件,被触发时,它们的值会发生改变.正因为如此,触发该事件时,可以一张一张翻阅浏览图片,,,, 步进UIStepper: @property( ...

  9. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  10. js有块级作用域么？

    //js私有作用域,js没有块级作用域 function Box(){ for(var i=0;i<5;i++){} console.log(i);//5,如果js有块级作用域,那么i在for循 ...

随机推荐

  1. C#常用集合

    数组的缺点:长度固定.因此引入集合的使用. 注:泛型集合更安全,性能更高. 常用集合 对应泛型 ①动态数组ArrayList    List<T> 常用方法属性:Add  Clear  C ...

  2. K8S集群搭建之软路由的安装

    一.系统要求 ①镜像:win10 ②1C.4G.20G即可 ③仅主机模式(共享网卡上网) ④老毛桃PE ⑤ip为192.168.66网段(因为我设置的其他K8S节点也为该网段)---koolshare ...

  3. Cesium 基于MapBox底图加载3DTiles 模型

    3DTiles 模型采用   CATIA V5 R22 --->3dxml --->GLB--->B3DM var extent = Cesium.Rectangle.fromDeg ...

  4. ios开源

    a http://code.cocoachina.com b http://code4app.com c http://www.oschina.net/ios/codingList/ d github ...

  5. nginx解决WordPress 上传到服务器后页面404错误的方法

    人啊,要说你傻了吧,真是啥事都能碰到: 因为换了nginx,把新做的上传到服务器配置好后,就主页和后台能打开,其他的所有页面,全是404,果真404和502是我最讨厌的数字啊,这让我很怀疑人生啊,怀疑 ...

  6. Linux 服务器作为Nginx web服务器常见优化参数

    内核参数调整cat /etc/sysctl.conf# sysctl settings are defined through files in # /usr/lib/sysctl.d/, /run/ ...

  7. Linux上FTP部署：基于mariadb管理虚拟用户

    FTP原理 FTP 采用 Internet 标准文件传输协议 FTP 的用户界面, 向用户提供了一组用来管理计算机之间文件传输的应用程序.图1 FTP 的基本模型 FTP 是基于客户---服务器(C/ ...

  8. Codeforces AIM Tech Round 5 (rated, Div. 1 + Div. 2)

    A. Find Square time limit per test: 1 second memory limit per test: 256 megabytes input: standard in ...

  9. Django中的path函数

    path( )作用:解析URL地址 path( ) 标准语法: (<>为必须的参数,[]为可选参数) path(<route>, <view>, [name=Non ...

  10. /var/lib/gems/2.5.0/gems/seccomp-tools-1.3.0/lib/seccomp-tools/dumper.rb:125: warning: Insecure world writable dir /home/python/.local in PATH, mode 040777 解决方案

    /var/lib/gems/2.5.0/gems/seccomp-tools-1.3.0/lib/seccomp-tools/dumper.rb:125: warning: Insecure worl ...