<!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. 3 weekend110的shuffle机制 + mr程序的组件全貌

    前面,讲到了hadoop的序列化机制,mr程序开发,自定义排序,自定义分组. 有多少个reduce的并发任务数可以控制,但有多少个map的并发任务数还没 缓存,分组,排序,转发,这些都是mr的shuf ...

  2. .Net设计模式_适配器模式

    引言: 有一次我看到一个朋友拿出一个三角型的东西,好奇的上去一看你,我勒个去,传说中的万能插口转接器(插口适配器). 一面是插入口,集合了我认识的所有插口的形状,也有国内没看见过的:另一个是跟插座接触 ...

  3. 转载-Linux下搭建VPN服务器（CentOS、pptp）

    转自:http://www.cnblogs.com/sixiweb/archive/2012/11/20/2778732.html 搭建过程参考这篇文章 先说我搭建过程中出现的问题吧: 按照 教程搭建 ...

  4. 找出数组中出现奇数次的元素<异或的应用>

    点击打开链接:百度面试题之找出数组中之出现一次的两个数(异或的巧妙应用) 题目描述|:给定一个包含n个整数的数组a,其中只有一个整数出现奇数次,其他整数都出现偶数次,请找出这个整数 使用异或操作,因为 ...

  5. DataTable导入到Excel文件

        ;                saveFileDialog.RestoreDirectory = ;            , intIndex] = column.ColumnName; ...

  6. 【转】android错误 aapt.exe已停止工作的解决方法

    http://www.jb51.net/article/57420.htm 在使用eclipse进行安卓java的编程的时候,有时候我们会遇到这样的问题:那就是无故弹出aapt.exe停止工作的提示, ...

  7. 微软称iPad版Office必来临 目前在完善中

    [PConline 资讯]微软在今年6月份的时候面向iPhone发布了Office,同时需要用户注册Office 365.而鲍尔默今天在参加Garnter科技研讨会时透露,iPad版本的Office始 ...

  8. raft 分布式协议 -- mongodb

    http://www.mongoing.com/presentations/webinar-raft-consensus-in-mongodb#rd

  9. ServletContext对象--三大域对象

    Servlet三大域对象的应用 request.session.application(ServletContext) ServletContext是一个全局的储存信息的空间,服务器开始就存在,服务器 ...

  10. Java基础知识强化之网络编程笔记01：InetAddress类的概述和使用

    1. InetAddress类 InetAddress是Java对IP地址的封装,在java.net中有许多类都使用到了InetAddress,包括ServerSocket,Socket,Datagr ...