<!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. LeetCode - 728. Self Dividing Numbers

    A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...

  2. Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  3. ps通道抠章

    1. 打开图片 2. 使用椭圆形选框工具,选择章所在范围(ALT+SHITF+鼠标左键) 3.复制图层(CTRL+J)为图层1,隐藏背景 4.进入通道,选择对比度最大的通道,复制通道副本 5.反选(C ...

  4. C#实现七牛云存储

    云存储,就是把本地的资源文件存放至网络上,可以公网访问.相当于网盘功能,感觉非常方便. 这里介绍的是七牛云存储.有兴趣的可以去官方网站详看 根据官网的介绍,本身是提供SDK的,下载地址,大家可以根据自 ...

  5. Servlet中请求重定向和请求转发和include

    响应的重定向 response.sendRedirect("ShowMSgSerlet1");//请求重定向 会将后面的浏览器的url改变. 请求转发 RequestDispatc ...

  6. Date 类

    一.Date类型的初始化 1. Date(int year, int month, int date); 直接写入年份是得不到正确的结果的. 因为java中Date是从1900年开始算的,所以前面的第 ...

  7. 剑指offer第八天

    32.把数组排成最小的数 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323 ...

  8. C++学习笔记第三天：类、虚函数、双冒号

    类 class Box { public: double length; // 盒子的长度 double breadth; // 盒子的宽度 double height; // 盒子的高度 }; 类成 ...

  9. linux主机名为bogon的原因及修改方法

    今天登录linux,发现主机名是bogon,虽然不影响使用,但是看着很不爽,于是想了解一下,为什么会发生这种情况,在csdn上找了到了一个文章,原文如下: 起因:公司网络接口做了接口认证,虚拟机桥接至 ...

  10. WEB开发-动态验证码

    1.基于Python实现,用到了django后台处理,刷新验证码功能,其他语言大同小异 2.登录界面 login.html <!DOCTYPE html> <html lang=&q ...