zoukankan      html  css  js  c++  java
  • 简易社交分享浮动块

    使用 overtrue/share.js ,github地址: https://github.com/overtrue/share.js
    简单易上手。

    直接引用包中的 /dist/css/share.min.css
    js用 /src/js/social-share.js   /src/js/qrcode.js
    jquert用: /dist/js/jquery.share.min.js

    <link href="../share.min.css?1557996680" rel="stylesheet">
    <script src="../social_share.min.js?1557996680"></script>
    <div class="share_block" style="bottom: 100px; 36px;z-index: 99999;right: 36px;height: 35px;position: fixed;overflow: visible;margin: 0;padding: 0;">
        <a href="#" onclick="return false;" style="color: #dddddd; 36px;height: 35px;display: block;position: absolute;text-decoration: none;cursor: pointer;"><svg t="1558001609007" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1112" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35"><path d="M256 640c0 0 57.6-192 384-192l0 192 384-256-384-256 0 192C384 320 256 480 256 640zM704 768 128 768 128 384l128 0c12.8-12.8 19.2-25.6 32-32C332.8 307.2 384 281.6 441.6 256L0 256 0 896l832 0L832 627.2l-128 83.2L704 768z" p-id="1113" fill="#1296db"></path></svg></a>
        <div class="share_box" style="text-align: left;overflow: hidden;background: #f6f6f6;margin-left: 36px;">
            <div style="height: 28px;color: #626262;overflow: hidden;font-weight: bold;font-size: 14px;line-height: 28px;padding: 0 5px;"><{t}>分享到<{/t}></div>
            <div style="padding: 5px 0;margin: 0;background: #fff;overflow: auto;overflow-x: hidden;"><div class="social-share"></div></div>
        </div>
    </div>
     <script>
     $('.share_block').hover(function() {
         // 鼠标移入时添加hover类
         $('.share_box').css('border','solid 1px #e9e9e9');
         $('.share_block').animate({'266px'},200);
         $('.share_box').animate({'230px'},200);
     }, function() {
         // 鼠标移出时移出hover类
         $('.share_box').css('border','none');
         $('.share_block').animate({'36px'},200);
         $('.share_box').animate({'0px'},200);
     });
     </script>
    social-share 为share.js的默认类,也可以自已指定,详细见文档。
  • 相关阅读:
    nodeJS 菜鸟入门
    Chrome 鲜为人知的秘籍(内部协议)&&Chrome功能指令大全
    前端工作面试问题
    ECharts模块化使用5分钟上手
    AppCan 之初体验
    Phonegap 环境配置
    【位运算】判断一个数是否为2的n次方
    【位运算】移位操作实现乘法运算
    O(1)时间复杂度求栈中最小元素
    Java Socket UDP编程
  • 原文地址:https://www.cnblogs.com/mengwangchuan/p/10877349.html
Copyright © 2011-2022 走看看