三种实现微博、微信分享的代码分享

本篇文章给大家分享的内容是三种代码实现微博、微信分享 ，有着一定的参考价值，有需要的朋友可以参考一下

html

    分享到：
    新浪微博
    微信

    

        分享到微信
        ×
    
    


    
    

        打开微信，点击底部的“发现”，        

        使用“扫一扫”即可将网页分享至朋友圈。    

css

/* share */
.shareSina,
.shareWX{  
  display: inline-block;    
  height: 25px;    
  z-index: 1;    
  cursor: pointer;    
  vertical-align: middle;
}
.share-icon{  
  display: inline-block;    
  width: 22px;    
  height: 22px;    
  z-index: 1;    
  cursor: pointer;    
  text-indent: -9999px;    
  vertical-align: middle;
}
.shareSina .share-icon{  
  background: url(/img/share-sina.png) no-repeat;    
  background-size:100%;
}
.shareWX .share-icon{   
  background: url(/img/share-wx.png) no-repeat;    
  background-size:100%;
}
.share-text{  
  vertical-align: middle;
}
.wx-box{  
  left: 3rem;    
  top: 1rem;    
  position: absolute;    
  margin: 0;    
  z-index: 1001;    
  background: #fff;    
  border: solid 1px #d8d8d8;    
  font-size: 0.12rem;   
  padding: 0.15rem;    
  display: none;
}
.wx-box .wx-box-head{  
  font-size: 0.12rem;    
  text-align: left;    
  line-height: 0.16rem;    
  height: 0.16rem;    
  position: relative;    
  color: #000;
}
.wx-box .wx-box-close{  
  width: 0.16rem;    
  height: 0.16rem;    
  position: absolute;    
  right: 0;    
  top: 0;    
  color: #999;    
  text-decoration: none;    
  font-size: 0.16rem;
}
.wx-box .wx-box-main{  
  padding: 0.15rem 0.1rem;    
  min-height: 2rem;    
  text-align: center;
}
.wx-box .wx-box-foot{  
  font-size: 12px;    
  text-align: left;    
  line-height: 22px;    
  color: #666;
}

js

图片可以自己去选择下载，我用的是阿里巴巴矢量图标库中下载的png

效果图：

云商商城系统

云商商城系统，即云商未来商城系统，云商商城系统提供完整的电子商务解决方案。云商商城系统集CMS、B2C、B2B2C、B2B、C2B、SNS用户社区于一体，包括网站商城、微信商城、手机商城等多种交易模式，支持实现不同模式的O2O电子商务平台。为企业树立企业品牌形象，实现独立网络推广，批发、零售，供应商加盟，并充分结合网站SEO、微博、APP，微信等移动客户端多渠道网络营销手段，实现线上线下统一管理，

下载