<!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. hdu 4712 (随机算法)

    第一次听说随机算法,在给的n组数据间随机取两个组比较,当随机次数达到一定量时,答案就出来了. #include<stdio.h> #include<stdlib.h> #inc ...

  2. 第一次JAVA基础考试后的反思

    今天进行了第一次JAVA基础考试,考查了课本上前面三章和方法的知识,基本没有涉及到数组.通过这次的考试,暴露了自己在学习中的很多问题. 机试题是编写一个学员状态转换器,主要运用的是选择语句和方法,而没 ...

  3. 【JAVA - SSM】之MyBatis输出映射

    MyBatis中的输出映射有两种:resultType和resultMap. 1.resultType 使用resultType进行结果映射时,只有当查询结果中有至少一列的名称和resultType指 ...

  4. Peterson算法与Dekker算法解析

    进来Bear正在学习巩固并行的基础知识,所以写下这篇基础的有关并行算法的文章. 在讲述两个算法之前,需要明确一些概念性的问题, Race Condition(竞争条件),Situations  lik ...

  5. POJ 1182 （经典食物链 /并查集扩展）

    (參考他人资料) 向量偏移--由"食物链"引发的总结 http://poj.org/problem?id=1182这道食物链题目是并查集的变型.非常久曾经做的一次是水过的,这次 ...

  6. SystemTimeToFileTime、FileTimeToLocalFileTime、LocalFileTimeToFileTime三函数的跨平台实现

    // test.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <stdlib.h>   #include & ...

  7. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  8. Flume NG中的ElasticSearch Sink

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  9. JAAS LOGIN IN WEBLOGIC SERVER--reference

    The Java Authentication and Authorization Service (JAAS) is a standard extension to the security in ...

  10. 一句代码，更加优雅的调用KVO和通知

    来源:wazrx 链接:http://www.jianshu.com/p/70b2503d5fd1 写在前面 每次使用KVO和通知我就觉得是一件麻烦的事情,即便谈不上麻烦,也可说是不方便吧,对于KVO ...