基础的思路，可以在此基础加强

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js分享到</title>

<style>

*{margin:0; padding:0;}

#div1{width:100px; height:200px; position:absolute; left:-100px; background:red;}

#div2{width:50px; height:100px; background:blue; position:absolute; right:-50px; top:50px;}

</style>

<script>

window.onload=function(){

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

  var oDiv2=document.getElementById('div2');

  var Timer=null;                 //全局定时器

  oDiv1.onmouseover=function(){   //此处用了冒泡

    startMove(0,10);

  }

  oDiv1.onmouseout=function(){

    startMove(-100,-10);

  }

  function startMove(target,speed){

      clearInterval(Timer);          //每次只开一个定时器，

      Timer=setInterval(function(){

        if(oDiv1.offsetLeft==target){     //判断目的地

            clearInterval(Timer);

        } else{

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

        }

      },30);

  }

}

</script>

</head>

<body>

<div id="div1">

  <div id="div2">

    分享到

  </div>

</div>

<script>

</script>

</body>

</html>

js 分享到按钮的更多相关文章

  1. 自己封装的一个JS分享组件

    因为工作的需求之前也封装过一个JS分享插件,集成了我们公司常用的几个分享平台. 但是总感觉之前的结构上很不理想,样式,行为揉成一起,心里想的做的完美,实际上总是很多的偏差,所以这次我对其进行了改版. ...

  2. JS实现常用的分享到按钮

    我们阅读博客的时候经常会用到这样功能,当然有时候也会想把自己的网站上也加入类似的分享功能,各大厂商已经给出了相应的API,点击一个按钮即可弹出窗口进入分享,我们事先可以设置一些参数,一般常用的就是 网 ...

  3. 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化

    http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...

  4. 微信网页JS分享，微信二次分享无缩略图问题

    很多时候我们要在微信中分享h5网页,这个时候就得用微信的分享接口来自定义分享的地址.标题.描述.缩略图了. 分享到微信的时候遇到一个问题,就是第一次分享到微信里,是正确的,但是在微信打开分享的链接,再 ...

  5. 自己动手写js分享插件 [支持https] (可以分享QQ空间，微信，新浪微博。。。)

    由于百度分享,jiathis 等分享插件在https下均会报错,就萌生了自己动手写一个分享插件的念头,其实实现起来一点都不难,以下代码都已在https网站运行通过,特附上以下代码:还请各位看官不吝赐教 ...

  6. 微信js分享朋友圈（一）

    1.绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 2.引入js文件 <script type=&q ...

  7. Asp.Net微信js分享

    1.准备工作 官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111 必须是认证过的公众号才 ...

  8. 自己动手写js分享插件 [支持https] (QQ空间，微信，新浪微博。。。)

    转载:https://blog.csdn.net/libin_1/article/details/52424340 废话不多说,传送门:http://download.csdn.net/detail/ ...

  9. iShare.js分享插件

    iShare.js是一个小巧的分享插件,纯JS编写,不依赖任何第三方库,使用简便. 为啥写这个插件? 因为在搭建个人blog时(还没有搭建好(¯﹃¯)),对目前国内比较受欢迎的分享插件都不太满意,主要 ...

随机推荐

  1. dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask

    dyld: Symbol not found: _OBJC_CLASS_$_NSURLSessionDataTask   Referenced from: /var/mobile/Applicatio ...

  2. 从零开始学习Node.js例子四 多页面实现数学运算 续一(使用connect和express框架)

    1.使用connect框架 .use方法用于绑定中间件到connect服务器,它会配置一系列在接到请求时调用的中间件模块,此例中我们要配置的中间件有favicon logger static rout ...

  3. C#代码示例_函数

    参数数组 C#允许为函数指定一个(只能指定一个)特定的参数,这个参数必须是函数定义中的最后一个参数,称为参数数组.参数数组可以使用个数不定的参数调用函数,可以使用params关键字定义它们. 参数数组 ...

  4. php7+apache2.4 (Windows7下)，成功启动。（楼主另外提供了1个php7集成环境打包： http://pan.baidu.com/s/1qXwjpF2 ，如果你只是想了解一下，放在d盘根目录。）

    php7正式版已经发布,性能是php5.4的2倍.博主入手php7 新鲜了一把,下面是解决问题之后成功启动php7的记录. ( 电脑必须win7 sp1, .netframework4 ) Windo ...

  5. D - 蜘蛛牌

    Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  6. Neuroaesthetics神经美学

    欢迎您到脑科学的世界! 神经美学(或neuroaesthetics)是一个相对较新的经验主义美学的子学科.经验主义美学需要科学的方法来研究艺术和音乐的审美观念. neuroesthetics于2002 ...

  7. Java常用正则表达式验证工具类RegexUtils.java

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class RegexUtils{ /** * 正则表达式 ...

  8. App.config/Web.config 中特殊字符的处理

    我们知道在应用程序中嵌入连接字符串可能导致安全漏洞和维护问题.使用 Ildasm.exe(MSIL 反汇编程序) 工具可以查看编译到应用程序源代码中的未加密连接字符串.此外,如果连接字符串发生更改,则 ...

  9. 关于CSS的那些事？

    关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错 ...

  10. IE 11 保护模式害惨了我

    花了几乎两天,一直用IE, 就说好好的 动态域名 为什么一直不能访问.用其它浏览器一试,我哭了,都是好的.