<!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. (2/18)重学Standford_iOS7开发_Xcode_课程笔记

    第二课: 1.惰性初始化 -(ObjectType *)example { f(!_example) example =[[ObjectType alloc] init]; return _examp ...

  2. 更改Sublimetext3的主题文件，改变某些不喜欢的颜色

    使用的主题是Monokai(SL),主题很好看,但是注释和内容选中的颜色看起来跟没有一个样,看起来很淡,所以稍微改一下主题文件的颜色.

  3. hibernate中持久化对象的生命周期（三态：自由态，持久态，游离态 之间的转换）

    三态的基本概念: 1,  暂时状态(Transient):也叫自由态,仅仅存在于内存中,而在数据库中没有对应数据.用new创建的对象,它没有持久化,没有处于Session中,处于此状态的对象叫暂时对象 ...

  4. [Node.js] Web Scraping with Pagination and Advanced Selectors

    When web scraping, you'll often want to get more than just one page of data. Xray supports paginatio ...

  5. Mysql参数详解

    1.配置参数 MySQL有两种途径途径了解其的配置参数,一个是MySQL交互模式下的命令SHOW  VARIABLES,一个使用mysqladmin variables 查询. MySQL的配置参数分 ...

  6. 查找字符串（C++实现）

    查找字符串(C++实现),不使用库函数: // SubString.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...

  7. iOS UIKit：Navigation Controllers

    navigation controller是一种层次结构的container view controller,即其通过一个view controllers栈来管理内部的content view con ...

  8. angularjs ng-repeat checkbox

    <div class="col-md-3" ng-repeat="user in title.UserList"> <p class=&quo ...

  9. Linux bash中的变量分类

    1.本地变量 VAR=XYZ 2.局部变量 local VAR=XYZ 3.环境变量 在子shell中可以起作用 export VAR=XYZ 4.位置变量 $0 脚本名本身 $1 第一个参数 $2 ...

  10. awk用法举例

    awk文本分割输出工具(按列输出工具) awk [options] ' PATTERN { action } ' file1, file2, ... 内置变量: FS:field separator, ...