Home > Article > Web Front-end > Use JS to implement simple tipping function

Use JS to implement simple tipping function

php中世界最好的语言Original: 2018-04-18 14:02:462158browse

This time I will bring you the use of JS to implement a simple tipping function, and what are the precautions for using JS to implement a simple tipping function. The following is a practical case, let’s take a look.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <metahttp-equiv="Content-Type"content="text/html;"/>
  <title>打赏</title>
  <styletype="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+ &#39;px&#39;;
        } else {
          dsSidebar.style.right=dsSidebarOffsetRight+ &#39;px&#39;;
          dsSidebarTimer=setTimeout(doMove, 30);
        }
      }
      doMove();
    }
    document.getElementById(&#39;dsImg&#39;).onload=function() {
      vardsSidebar=document.getElementById(&#39;dsSidebar&#39;);
      dsSidebar.onmouseover=function() {
        startMove(0, 24);
      }
      dsSidebar.onmouseout=function() {
        startMove(-200, -24);
      }
      moveBtn();
    }
  </script>
</head>
 
<body>
  <pid="dsSidebar">
    <pclass="dsPanels">
      <pclass="dsPanel dsPanel-highlight">
        <pclass="dsPanel-title">喜欢请用微信打赏</p>
        <imgid=&#39;dsImg&#39;src="http://files.cnblogs.com/files/eritpang/weixin.bmp"alt=""width="160"height="160"/>
      </p>
    </p>
    <spanclass="dsPanel-button"id=&#39;dsBtn&#39;><b>打<br/>赏</b></span>
  </p>
</body>
 
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Use JS to implement simple tipping function

Related articles