<!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. php非阻塞执行系统命令

    大家都知道php调用系统命令常用的主要有以下几种方法: 如exec(), system(), passthru(), shell_exec() 这几个函数的用法在此不做说明,有需要的请查阅php相关手 ...

  2. PC-[WIN7]此计算机无法联接家庭组

    不能启用 HomeGroup Listener 解决: 1.设定为自动开始:Function Discovery Provider HostFunction Discovery Resource Pu ...

  3. WordPress文件上传与下载问题解决

    网上流传了一些修改WordPress文件上传大小限制的做法,大部分是一个版本,而且说得不够准确,特别是对于生手的指导性不强,本文总结了使用Wordpress博客的朋友在文件上传与下载时大小限制,及文件 ...

  4. AX2012服务器配置--Windows Server 2012 配置远程桌面同一帐户允许多session同时登录

    网上找了很多关于设置远程桌面最大连接数的文章,大都是说先要到控制面板的管理工具中设置远程桌面会话主机等,大体和我之前的文章<设置WINDOWS SERVER 2008修改远程桌面连接数>里 ...

  5. JMeter使用记录1 -- JDBC測试

    场景:使用jmeter对web应用和mysql数据库进行压力測试 JMeter是一款很强大的測试工具.能够用来測试web,数据库.从07年用过之后一直对它情有独钟,以下记录下在一个项目中对它的简单使用 ...

  6. android 76 使用get post方式提交数据

    get方式: package com.itheima.getmethod; import java.io.InputStream; import java.net.HttpURLConnection; ...

  7. 《Linux内核修炼之道》 系列

    http://blog.csdn.net/fudan_abc/article/category/655796

  8. OC学习笔记[注意事项]

    alloc  new  retain之后都必须要调用release方法 计数器要变只有这几种方法 retain release alloc new copy方法才会使计数器改变,谁想用人家对象,就对他 ...

  9. 照片浏览器软件-WTL开发的照片浏览器

    前段时间,为了准备情人节礼物,本人想了做一个照片浏览器送给女友,专门播放我俩的所有照片的一个程序软件,于是,就写了这么一个照片浏览器软件.本程序是基于WTL8.0开发的一个图片/照片浏览器,涉及到XM ...

  10. javascript中的函数返回值（return）

    有些情况,我们希望获取到函数的执行结果,也就是我们需要在函数以外的地方处理执行结果,而不是在函数内部处理.这时我们就需要为函数设一个返回值,也就是return,即函数执行完毕以后返回的结果. 若在函数 ...