自制简易打赏功能的实例

186 阅读 0 评论 123 点赞

我是靠谱客的博主潇洒小蝴蝶，这篇文章主要介绍自制简易打赏功能的实例，现在分享给大家，希望可以做个参考。

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

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

3、将如下代码中的http://www.uoften.com/uploadfile/2018/0411/20180411032204966.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);
    }

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

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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://www.uoften.com/uploadfile/2018/0411/20180411032204966.bmp" alt="" width="160" height="160" />
      </div>
    </div>
    <span class="dsPanel-button" id='dsBtn'><b>打<br/>赏</b></span>
  </div>
</body>

</html>