<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

		    *{

		    	margin: 0;

		    	padding: 0;

		    }

			#div1{

				width:150px;

				height:200px;

				background: pink;

				position: absolute;

			}

			#div1 span{

				width:30px;

				height:60px;

				background: deepskyblue;

				position: absolute;

				right:-30px;

				top:60px;

			}

		</style>

		<script>

			window.onload=function(){

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

				var timer="null";

				oDiv1.onmousemove=function(){

					move(0);

				}

				oDiv1.onmouseout=function(){

					move(-150);

				}

				function move(iTarget){

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

				clearInterval(timer);

				timer=setInterval(function(){

					var speed;

				  if(oDiv1.offsetLeft>iTarget){

				  	  speed=-5;

				  }

				else{

					speed=5;

				}

				  if(oDiv1.offsetLeft==iTarget){

				  	clearInterval(timer);

				  }

				  else{

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

				  }

				},30);

				}

			}

		</script>

	</head>

	<body>

		<div id="div1">

			<span>分享到</span>

		</div>

	</body>

</html>

分享到JavaScript的更多相关文章

  1. 【转发】网易邮箱前端技术分享之javascript编码规范

    网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...

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

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

  3. [转载] 自定义百度网盘分享密码 (Javascript)

    压缩版 javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).protot ...

  4. 分享十个JavaScript在线调试工具

    测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...

  5. 分享一个JavaScript嗅探工具Tracker

    今天发现一个好用的JS侦测工具,实时监测JS代码的使用效率,运行状态等. 期待插件作者添加更好的功能. 运行效果 运行效果如下(我把它放到标签里了): 1.点击Tracker书签工具 2.选择查看选项 ...

  6. JSONP分享-- 在JavaScript中跨域请求

    如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...

  7. 【前端分享】 JavaScript最经典的55个技巧（转）

    从别的地方看到的,保存下,有空实践下再补充. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...

  8. [分享]前端javascript插件（均开源）

    记录并分享一些自己使用过的插件,便于以后有相应的功能需要使用可以及时想到. 1:数字插件countUp.js 功能:用于动态显示数字的增加和减少 项目github地址:http://inorganik ...

  9. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

随机推荐

  1. Windows下为Lua脚本进行加密处理

    缘由 想对Lua脚本进行安全性处理,可惜一直没有想到很好的解决方案,考虑过用原生Lua将脚本编译成二进制代码,也考虑过用zlib将文件进行加密压缩处理,但是感觉都不是最佳方案,今天忽然想到有个东西叫L ...

  2. CentOS安装JDK 8

    准备工作 首先,更新包: yum update 检查服务器上是否已安装旧版本的Java: java -version 如果有旧版本的Java则移除: yum remove java-1.6.0-ope ...

  3. PHPUnit-附录 A. 断言 (assert)

    [http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.assertions.html] 本附录列举可用的各种断言方法. assertArrayHasKe ...

  4. 如何知道你的linux是什么时候安装的

    在安装系统时,每个分区下都会有一个 lost+found,而且这个目录的创建时间是和该分区创建的时间一样的.所以如果想知道你的系统是什么时候安装的,只需要看这个目录的创建时间即可. 通常情况下,我们分 ...

  5. 网页版仿Excel效果组件--handsontable拓展运用

    引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...

  6. Git环境配置+VSCode中文乱码问题

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (files.autoguessEncoding= ...

  7. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  8. 关于eclipse安装springide的记录

    近些天,又开始学习springmvc,使用eclipse进行开发,由于很多快捷键时候需要安装springide插件才能出来,我遇到配置DispatcherServlet,结果alt+/出不来Dispa ...

  9. Mysql利用存储过程插入400W条数据

    CREATE TABLE dept( /*部门表*/ deptno MEDIUMINT UNSIGNED NOT NULL DEFAULT 0, /*编号*/ dname VARCHAR(20) NO ...

  10. Ubuntu下Maven配置与Maven项目创建教程

    一. Ubuntu下Maven配置 windows下Maven配置参考http://www.cnblogs.com/LexMoon/p/JavaMaven.html ubuntu下Maven地址htt ...