<!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. 二维码开源库ZBar-实现中文解码

    中文乱码 上篇<ZBar-windows下编译和使用>已经成功解析了条形码,但目标是二维码,经测试二维码中文会出现乱码.下图二维码的内容是"http123测试456", ...

  2. 基于layui和bootstrap搭建极简后台管理框架

    年前无聊,想自己搭建一个后台管理框架,对比了easyui.Extjs.H-ui.H+UI.layui几个框架,easyui和Extjs虽然功能强大但是界面实在是接受不了,H+UI和layuiAdmin ...

  3. a:hover 等伪类选择器

    a.random:hover{ color:#64FFDA; font-size:120%; }   //选择的是class="random"的<a>标签.   a#s ...

  4. .NET平台开源项目速览(19)Power BI神器DAX Studio

    PowerBI更新频繁,已经有点更不上的节奏,一直在关注和学习中,基本的一些操作大概是没问题,更重要的是注重Power Query,M函数,以及DAX的使用,这才是核心.   上个月研究了DAX的一些 ...

  5. Servlet3.0上传图片示例

    一.前端JSP页面 <%@page pageEncoding="UTF-8"%><!DOCTYPE html><html><head> ...

  6. bcache的使用

    一.前提:内核中需要配置bcache模块 1.1 检查 - 是否存在于内核中:检查/sys/fs/bcache目录是否存在,没有说明内核中没有bcache - 是否以内核模块方式存在:检查/lib/m ...

  7. springBoot之配置文件的读取以及过滤器和拦截器的使用

    前言 在之前的学习springBoot中,成功的实现了Restful风格的基本服务.但是想将之前的工程作为一个项目来说,那些是仅仅不够的.可能还需要获取自定义的配置以及添加过滤器和拦截器.至于为什么将 ...

  8. 判断json是否包含了每个键 PHP

    (1)可以用array_key_exists去判断object对象或array数组中是否含有某个键: (2)不可以用isset去判断判断object对象或array数组中是否含有某个键 $decode ...

  9. MysqL碎片整理优化

    先来说一下什么是碎片,怎么知道碎片有多大! 简单的说,删除数据必然会在数据文件中造成不连续的空白空间,而当插入数据时,这些空白空间则会被利用起来.于是造成了数据的存储位置不连续,以及物理存储顺序与理论 ...

  10. textarea只允许上下调节尺寸

    对于extarea,因为如果不做限制的话,它是可以自由调节尺寸的,对于这一点我相信用户是非常喜欢的,因为每个人都有自己认为合适的尺寸,但是对于前端来说就比较头疼了,因为随意调节宽高,就会破坏整体布局, ...