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

<!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. mysql alter 语句用法,添加、修改、删除字段等

    2013-05-03 17:13 39459人阅读 评论(1) 收藏 举报  分类: Mysql(9)  修改表名: ALTER  TABLE admin_user RENAME TO a_use / ...

  2. 黑马程序员——【Java高新技术】——JDK1.5新特性：静态导入、可变参数、增强型for循环、自动装箱拆箱、枚举

    ---------- android培训.java培训.期待与您交流! ---------- 一.静态导入 1.import和import static区别: (1)import 是导入一个类或某个包 ...

  3. HTML、canvas、video灰度

    效果图: 注:本例需在服务器上运行的才能看到效果.视频文件可换成本地视频(HBuilder有集成服务器或者使用wampmanager). 代码如下: <!DOCTYPE html> < ...

  4. XML实体注入漏洞

    XML实体注入漏洞 测试代码1: 新建xmlget.php,复制下面代码 <?php $xml=$_GET['xml']; $data = simplexml_load_string($xml) ...

  5. yii去除index.php的入口脚本显示为seo友好的url

    1.去除入口脚本需要在重写url,如果你的webserver软件时Apache的话,必须配置httpd.conf,搜索“LoadModule rewrite_module modules/mod_re ...

  6. uva 11582

    #include <iostream> #include <map> #include <cmath> #include <vector> #inclu ...

  7. Visual SVN Server启动失败0x8007042a错误

    今天在程序VisualSVNServer界面中启动服务时,报错如下:       VisualSVNServerServer service failed to start:服务已返回特定的服务器错误 ...

  8. ES TIPS

    1,Testing Analyzers Especially when you are new to Elasticsearch, it is sometimes difficult to under ...

  9. graphql 新API 开发方式

    我们知道 GraphQL 使用 Schema 来描述数据,并通过制定和实现 GraphQL 规范 定义了支持 Schema 查询的 DSQL (Domain Specific Query Langua ...

  10. oracle返回多个参数

    CREATE OR REPLACE PACKAGE BODY get_form_no_pub IS /*================================================ ...