<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body {

padding: 0;

margin: 0;

}

#div1 {

width: 100px;

height: 150px;

background-color: #1B6D85;

left:-100px;

position: absolute;

}

#div1 span {

width: 20px;

height: 100px;

line-height: 30px;

background-color:#1B6D85;

left:100px;

top:20px;

position: absolute;

}

</style>

<script type="text/javascript">

window.onload = function() {

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

oDiv1.timer = null;

oDiv1.onmouseover = function() {

startMove(this, 0);

};

oDiv1.onmouseout = function() {

startMove(this, -100);

};

};

window.onscroll = function () {

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

var ioffsetMiddle = document.documentElement.scrollTop || document.body.scrollTop;

ioffsetMiddle = ioffsetMiddle + (document.documentElement.clientHeight - oDiv1.offsetHeight) / 2;

//防止有小数，导致一直跳动

ioffsetMiddle = parseInt(ioffsetMiddle);

startMiddle(oDiv1, ioffsetMiddle);

};

function startMiddle(obj, iTarget) {

clearInterval(obj.timerMiddle);

obj.timerMiddle = setInterval(function () {

var speed = (iTarget - obj.offsetTop) / 8;

//如果大于零就取上，小于零就取下

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

document.getElementById('input1').value = iTarget + '-' + (obj.offsetTop + speed);

if (obj.offsetTop == iTarget) {

clearInterval(obj.timerMiddle);

} else {

obj.style.top = obj.offsetTop + speed + 'px';

}

}, 10);

}

function startMove(obj, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function () {

var speed = (iTarget - obj.offsetLeft) / 8;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (obj.offsetLeft == iTarget) {

clearInterval(obj.timer);

} else {

obj.style.left = obj.offsetLeft + speed + 'px';

}

}, 10);

}

</script>

</head>

<body style="height:2000px;">

<input type="text" id="input1"/>

<div id="div1">

<span>

分享到

</span>

</div>

</body>

</html>

javascrip 分享到的更多相关文章

  1. 技术分享｜JavaScript的前世今生

    目录 一.什么是JavaScript 二.JavaScript的功能 三.JavaScript可以做什么 四.JavaScript框架 五.HTML,CSS和JavaScript 六.JavaScri ...

  2. .net点选验证码实现思路分享

    哈哈好久没冒泡了,最进看见点选验证码有点意思,所以想自己写一个. 先上效果图 如果你被这个效果吸引了就请继续看下去. 贴代码前先说点思路: 1.要有一个汉字库,并按字形分类.(我在数据库里是安部首分类 ...

  3. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  4. 【分享】标准springMVC+mybatis项目maven搭建最精简教程

    文章由来:公司有个实习同学需要做毕业设计,不会搭建环境,我就代劳了,顺便分享给刚入门的小伙伴,我是自学的JAVA,所以我懂的.... (大图直接观看显示很模糊,请在图片上点击右键然后在新窗口打开看) ...

  5. 【原创分享·支付宝支付】HBuilder打包APP调用支付宝客户端支付

    前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还 ...

  6. 分享一个SQLSERVER脚本（计算数据库中各个表的数据量和每行记录所占用空间）

    分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间) 很多时候我们都需要计算数据库中各个表的数据量和每行记录所占用空间 这里共享一个脚本 CREATE TABLE #tab ...

  7. 干货分享：SQLSERVER使用裸设备

    干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...

  8. Java8实战分享

    虽然很多人已经使用了JDK8,看到不少代码,貌似大家对于Java语言or SDK的使用看起来还是停留在7甚至6. Java8在流式 or 链式处理,并发 or 并行方面增强了很多,函数式的风格使代码可 ...

  9. 【开源】分享2011-2015年全国城市历史天气数据库【Sqlite+C#访问程序】

    由于个人研究需要,需要采集天气历史数据,前一篇文章:C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子),介绍了基本的采集思路和核心代码,经过1个星期的采集,历史数据库 ...

随机推荐

  1. install Active Directory域控制器

    设置Active Directory域控制器 正如我们在网络与系统配置专题文章中所提到的那样,我们已将两部服务器设置为对应于内部域“intdomain.com”的Active Directory域控制 ...

  2. lost connection to mysql server at "reading initial communication packet",system error:2

  3. 【转】shell 教程——03 Shell脚本语言与编译型语言的差异

    大体上,可以将程序设计语言可以分为两类:编译型语言和解释型语言. 编译型语言 很多传统的程序设计语言,例如Fortran.Ada.Pascal.C.C++和Java,都是编译型语言.这类语言需要预先将 ...

  4. win10清理C盘

    用win10系统也不是很久,发现C盘容量越来越小了,于是乎扫描了一下,发现有两个文件容量很大 C:/hiberfil.syssize:1660444672 C:/swapfile.syssize:26 ...

  5. Android Butterknife框架配置

    一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...

  6. ElasticSearch怎样加入，检索数据

    Elasticsearch是一个分布式的文档(document)存储引擎.它能够实时存储并检索复杂数据结构--序列化的JSON文档.换言说,一旦文档被存储在Elasticsearch中,它就能够在集群 ...

  7. Linux kernel驱动相关抽象概念及其实现 之“bus，device，driver”

    bus,device,driver三个很重要的概念贯穿Linux内核驱动架构,特转载一篇博文: (转载自http://blog.csdn.net/gdt_a20/article/details/642 ...

  8. Makefile详解--隐含规则

    Makefile详解--隐含规则(转) Makefile系列文章,这里有个前辈连续洗了一个系列来介绍,共有26篇博客文章. http://www.cppblog.com/ivenher/archive ...

  9. bash手册 之重定向原理与实现

    http://www.gnu.org/software/bash/manual/bashref.html#Redirections http://www.cnblogs.com/weidagang20 ...

  10. 项目FAQ

    报错: Conversion from String Literal to Char* is deprecated http://stackoverflow.com/questions/1369030 ...