1、面向过程分享

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style>

 *{

 margin: 0;

 padding: 0;

 }

 ul,li{

 list-style: none;

 }

 .share {

 position: absolute;

 width: 300px;

 height: 200px;

 left: -270px;

 }

 .share span{

 padding-top: 70px;

 width: 30px;

 height: 130px;

 display: block;

 float: left;

 border-radius:0 10px 10px 0;

 background-color: pink;

 color: #fff;

 text-align: center;

 }

 .sharecont{

 width: 270px;

 height: 200px;

 float: left;

 background: grey;

 }

 </style>

 </head>

 <body>

 <div class="share" id="share">

 <div class="sharecont"></div>

 <span id="share">分享到:</span>

 </div>

 <script>

 /**

 * 练习javascript中运动的概念

 * javascript 要实现运动运动设计到的两个地方:

 * 1、div 必须要设置为position: absolute

 * 2、使用定时器来完成

 * 3、以后判断条件尽量用===的形式来判断到达终点

 */

 window.onload = function () {

  var share = document.getElementById('share');

  var timer = null;

 function startMove (iTarget) {

  clearInterval(timer);

  var speed = 0;

  timer = setInterval(function(){

 if( share.offsetLeft < iTarget ){

  speed = 10;

 }else{

  speed = -10;

 }

 if( share.offsetLeft === iTarget ){

   clearInterval(timer);

  }else{

   share.style.left = share.offsetLeft + speed + "px";

  }

  },30);

 }

 share.onmouseover = function () {

  startMove(0);

 };

 share.onmouseout = function () {

  startMove(-270);

 };

 };

 </script>

 </body>

 </html>

2、使用面向对象改写以上程序

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style>

     *{

       margin: 0;

       padding: 0;

     }

     ul,li{

       list-style: none;

     }

     .share {

       position: absolute;

       width: 300px;

       height: 200px;

       left: -270px;

     }

     .share span{

       padding-top: 70px;

       width: 30px;

       height: 130px;

       display: block;

       float: left;

       border-radius:0 10px 10px 0;

       background-color: #6ed8e5;

       color: #fff;

       text-align: center;

     }

     .sogoushare {

         top: 300px;

     }

     .sogoushare span{

         background-color: #3acdb0;

     }

     .sharecont{

       width: 270px;

       height: 200px;

       float: left;

       background: grey;

     }

   </style>

 </head>

 <body>

 <div class="share" id="baidushare">

   <div class="sharecont"></div>

   <span>分享到</span>

 </div>

 <div class="share sogoushare" id="sogoushare">

   <div class="sharecont"></div>

   <span>分享到</span>

 </div>

 <script>

   /**

    * 练习javascript中运动完成面向对象的分享功能

    * overItarget 传入移入的到达目标值

    * outItarget 传入移出的目标值

    */

   function Share (id, overItarget, outItarget) {

     this.share = document.getElementById(id);

     this.timer = null;

     this.speed = 0;

     var that = this;

     this.share.onmouseover = function () {

       that.startMove(overItarget);

     };

     this.share.onmouseout = function () {

       that.startMove(outItarget);

     };

   }

   Share.prototype.startMove = function(iTarget) {

     clearInterval(this.timer);

     var that = this;

     this.timer = setInterval(function(){

     if( that.share.offsetLeft < iTarget ){

          this.speed = 10;

     }else{

          this.speed = -10;

     }

     if( that.share.offsetLeft === iTarget ){

          clearInterval(this.timer);

       }else{

          that.share.style.left = that.share.offsetLeft + this.speed + "px";

        }

     },30);

   }; 

   window.onload = function () {

     var baiduShare = new Share("baidushare",0,-270);

     var sogouShare = new Share("sogoushare",0,-270);

   };

 </script>

 </body>

javascript 实现分享功能的更多相关文章

  1. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  2. 微信JS-SDK实际分享功能

    为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了,在ipho ...

  3. js分享功能

    引用JiaThis的分享功能: 直接在想要放置分享功能的地方加上如下代码即可: <!-- JiaThis Button BEGIN --> <div class="jiat ...

  4. js分享功能(微信,QQ,微博,空间,豆瓣等)

    日常编程中,我们可能会碰到项目中的分享功能,各大平台都有分享接口和文档说明,当然也有一些一键分享插件,例如:sosh,iShare.js等等 但有些同学不想引用插件,那么我整理了一些常用的分享至平台功 ...

  5. H5分享功能

    web端分享功能 https://www.cnblogs.com/sdcs/p/8328367.html H5分享功能 公司里面做web开发经常会做H5页面,今天整理分享一下. 微信公众号平台 步骤一 ...

  6. 12个实用的 JavaScript 框架分享给前端开发者

    JavaScript库是预先编写的 JavaScript 工具代码,让开发者可以更容易开发 JavaScript 应用.这个列表我们列出了2017年1月份功能丰富的 JavaScript 库,可以帮助 ...

  7. ThinkPHP5集成JS-SDK实现微信自定义分享功能

    最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...

  8. 实现分享功能插件2---jiathis分享插件应用

    博主原创:未经博主允许,不得转载 在上一篇的博文中分享了如何用百度分享插件实现分享功能,现在展示用jiathis进行实现分享功能: 主要代码如下: <body> <div class ...

  9. MUI 分享功能（微信、QQ 、朋友圈）

    配置文件:manifest.json plus ->plugins 下边 "share": {/*配置应用使用分享功能,参考http://ask.dcloud.net.cn/ ...

随机推荐

  1. 使用CButtonColumn自定义CGridiew里面的按钮

    参考 http://www.yiiwiki.com/post/8 使用yii做的项目,编辑的时候,使用到的是自带的 CButtonColumn , 现在需要在编辑的时候跳新页面,这时只需要这样做就可以 ...

  2. yii cgridview 如何显示图片

    发布的新闻或介绍里有图片,图片存的是Url地址,通过yii的cgridview,默认是数据库里存的啥就显示啥,如何把url地址转为图片?直接上代码 <?php $data = $model-&g ...

  3. 扩展欧几里德 POJ 1061

    欧几里德的是来求最大公约数的,扩展欧几里德,基于欧几里德实现了一种扩展,是用来在已知a, b求解一组x,y使得ax+by = Gcd(a, b) =d(解一定存在,根据数论中的相关定理,证明是用裴蜀定 ...

  4. 软键盘 输入法管理器 InputMethodManager

     基本介绍 软键盘的显示原理 软键盘其实是一个Dialog.InputMethodService为我们的输入法创建了一个Dialog,并且对某些参数进行了设置,使之能够在底部或者全屏显示.当我们点击输 ...

  5. ASP.NET-FineUI开发实践-6

    FineUI4.1.0更新,传说的V4版稳定版,很多人也从3.0+升级了,接着又连续更新了几次,现在是V4.1.3 2014-09-09日更新的.更新的挺快,感觉跟不上节奏,我很欣慰,看来开原版还是靠 ...

  6. 《Effective C++》 阅读小结 (笔记)

    A person who is virtuous is also courteous. "有德者必知礼" 书本介绍:<Effective C++:改善程序与设计的55个具体做 ...

  7. install pip3 for python 3.x

    前言: 我目前使用的服务器为centos6.x 系统自带的python的版本为2.6.x,但是目前无论是学习还是使用python,python3都是首选,那么问题来了.---如何安装python3环境 ...

  8. error on line 1 at column 6: XML declaration allowed only at the start of the document

    This page contains the following errors: error on line 1 at column 6: XML declaration allowed only a ...

  9. 修改apk显示或隐藏桌面图标

    反编译CM设置,打开AndroidManifest.xml,搜索“DEFAULT”,把他替换为"LAUNCHER",然后回编译,回编译之后签名在用RE放到system\app下该权 ...

  10. 转：Qt项目中遇到的一些小问题汇总

    链接:http://blog.csdn.net/yangyunfeizj/article/details/7082001    作者:GoatYangYang 公司让负责qt界面开发,但是接触qt又不 ...