Home > Article > Web Front-end > Use JS to implement simple tipping function
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+ 'px'; } else { dsSidebar.style.right=dsSidebarOffsetRight+ 'px'; dsSidebarTimer=setTimeout(doMove, 30); } } doMove(); } document.getElementById('dsImg').onload=function() { vardsSidebar=document.getElementById('dsSidebar'); 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='dsImg'src="http://files.cnblogs.com/files/eritpang/weixin.bmp"alt=""width="160"height="160"/> </p> </p> <spanclass="dsPanel-button"id='dsBtn'><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!
Recommended reading:
JS array delete specified element
The above is the detailed content of Use JS to implement simple tipping function. For more information, please follow other related articles on the PHP Chinese website!