自制简易打赏功能的实例


Posted in Javascript onSeptember 02, 2017

1、申请开通cnblogs的JS代码支持

自制简易打赏功能的实例

2、将微信收款码图片上传到cnblogs

自制简易打赏功能的实例

3、将如下代码中的http://files.cnblogs.com/files/eritpang/weixin.bmp替换为刚刚上传的收款码图片的链接地址,然后将代码添加到设置->博客侧边栏公告(支持HTML代码)(支持JS代码)里面,再点击“保存”即可。

<!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;" />
  <title>打赏</title>
  <style type="text/css">
    #dsSidebar {
      z-index: 999999;
      top: 18%;
      width: 200px;
      height: 200px;
      position: fixed;
      right: -200px;
    }

    #dsBtn {
      z-index: 999999;
      width: 30px;
      height: 58px;
      left: -30px;
      top: 80px;
      line-height: 28px;
      position: absolute;
    }

    .dsPanels {
      margin: 0px auto;
      overflow: hidden;
    }

    .dsPanel {
      float: left;
      margin: 0px 0px;
      padding: 12px 0px;
      text-align: center;
      background: #ffeedd;
      border-color: #ffeedd;
      border-radius: 8px;
    }

    .dsPanel-highlight {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      width: 160px;
      border: 8px solid #fd935c;
    }

    .dsPanel-button {
      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #ffeedd;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 1px rgba(black, .1);
      background: #fd935c;
      border-bottom: 2px solid #cf7e3b;
      border-color: rgba(black, .15);
      border-radius: 4px;
    }

    .dsPanel-title {
      width: 128px;
      margin: -15px auto 15px;
      padding-bottom: 0px;
      line-height: 22px;
      font-size: 14px;
      font-weight: bold;
      color: #ffeedd;
      text-shadow: 0 1px rgba(black, .05);
      background: #fd935c;
      border-radius: 0 0 4px 4px;
    }
  </style>
  <script>
    function moveBtn() {
      var dsBtn = document.getElementById("dsBtn");
      var now = new Date();
      var times = now.getTime();
      var offsetSize = Math.sin(times / 380.0) * 15 + 45;
      var radius = Math.sin(times / 380.0) * 18 + 24;
      dsBtn.style.left = -offsetSize + 'px';
      dsBtn.style.width = offsetSize + 'px';
      dsBtn.style.borderRadius = radius + 'px';
      setTimeout(moveBtn, 60);
    }

    var dsSidebarTimer = null;
    var dsSidebarOffsetRight = -200;
    function startMove(dsSidebarTarget, dsSidebarSpeed) {
      clearTimeout(dsSidebarTimer);
      function doMove() {
        var dsSidebar = document.getElementById('dsSidebar');
        dsSidebarSpeed *= 0.9;
        if (dsSidebarSpeed > -1 && dsSidebarSpeed < 0) {
          dsSidebarSpeed = -1;
        } else if (dsSidebarSpeed < 1 && dsSidebarSpeed > 0) {
          dsSidebarSpeed = 1;
        }
        dsSidebarOffsetRight = dsSidebarOffsetRight + dsSidebarSpeed;
        if (dsSidebarSpeed > 0 && dsSidebarOffsetRight >= dsSidebarTarget) {
          dsSidebarOffsetRight = dsSidebarTarget;
          dsSidebar.style.right = dsSidebarOffsetRight + 'px';
        } else if (dsSidebarSpeed < 0 && dsSidebarOffsetRight <= dsSidebarTarget) {
          dsSidebarOffsetRight = dsSidebarTarget;
          dsSidebar.style.right = dsSidebarOffsetRight + 'px';
        } else {
          dsSidebar.style.right = dsSidebarOffsetRight + 'px';
          dsSidebarTimer = setTimeout(doMove, 30);
        }
      }
      doMove();
    }
    document.getElementById('dsImg').onload = function () {
      var dsSidebar = document.getElementById('dsSidebar');
      dsSidebar.onmouseover = function () {
        startMove(0, 24);
      }
      dsSidebar.onmouseout = function () {
        startMove(-200, -24);
      }
      moveBtn();
    }
  </script>
</head>

<body>
  <div id="dsSidebar">
    <div class="dsPanels">
      <div class="dsPanel dsPanel-highlight">
        <p class="dsPanel-title">喜欢请用微信打赏</p>
        <img id='dsImg' src="http://files.cnblogs.com/files/eritpang/weixin.bmp" alt="" width="160" height="160" />
      </div>
    </div>
    <span class="dsPanel-button" id='dsBtn'><b>打<br/>赏</b></span>
  </div>
</body>

</html>

4、效果如下。

自制简易打赏功能的实例

以上这篇自制简易打赏功能的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js传值 判断
Oct 26 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
JS上传前预览图片实例
Mar 25 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
前端微信支付js代码
Jul 25 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
Vue使用vue-cli创建项目
Sep 01 #Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 #Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 #Javascript
Vue的Class与Style绑定的方法
Sep 01 #Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 #Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
You might like
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
js布局实现单选按钮控件
2020/01/17 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
python中的闭包用法实例详解
2015/05/05 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python实现的科学计算器功能示例
2017/08/04 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
python 读取串口数据的示例
2020/11/09 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
党校毕业心得体会
2014/09/13 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
机动车登记业务委托书
2014/10/08 职场文书
财务工作失职检讨书
2014/11/21 职场文书
测量员岗位职责
2015/02/14 职场文书
法院答辩状格式
2015/05/22 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python