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

<!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. php 得到一个文件夹下的所有文件,包括子文件中的文件

    $dir = FCPATH."uploads/attachment/"; $this->getFiles($dir); function getFiles($dir) { $ ...

  2. javascript之DOM篇二(操作)

    一.创建DOM元素 createElement:document.createElement(' 所要创建的元素标签名'): <!DOCTYPE html><html>< ...

  3. AMQP与RabbitMQ简介

    MQ(Message Queue,消息队列)是一种应用系统之间的通信方法.是通过读写出入队列的消息来通信(RPC则是通过直接调用彼此来通信的). 1.AMQP协议 在了解RabbitMQ之前,首先要了 ...

  4. supervisor安装配置与使用

    supervisor:C/S架构的进程控制系统,可使用户在类UNIX系统中监控.管理进程.常用于管理与某个用户或项目相关的进程. 组成部分supervisord:服务守护进程supervisorctl ...

  5. java.net.BindException: address already in use <null>:xxxx

    linux下,tomcat突然关闭了,执行关闭(shutdown.sh)和启动(startup.sh)成功后,tomcat仍未运行,查看tomcat的catalina日志发现这样一个报错:java.n ...

  6. 关于路径的使用,assi下载和

    直接给一个路径下载图片,这函数直接使用assi -(void)downloadWithURL:(NSString*)RequestUrl SavePath:(NSString*)savepath wi ...

  7. 【转载】分享一些Qt学习资源,欢迎下载

    资源来源:http://bbs.csdn.net/topics/390358737 经过我一翻整理,把一些我收集到的Qt学习资源分享给大家,主要适合新手,老鸟可以直接忽略我.要说明一下,很多资源都是在 ...

  8. linux的软硬链接的特性

    硬链接的特征: 1.拥有相同的i节点和储存block块,可以看作是同一个文件 2.可以通过i节点识别 3.不能跨分区 4.不能针对目录使用 软链接的特征: 1.类似于windows的快捷方式 2.软链 ...

  9. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  10. LeetCode 【47. Permutations II】

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...