php打赏功能,用JS实现简易打赏功能

功能,用JS实现简易打赏功能"/>

php打赏功能,用JS实现简易打赏功能

这次给大家带来用JS实现简易打赏功能，用JS实现简易打赏功能的注意事项有哪些，下面就是实战案例，一起来看一下。

打赏

#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;

}

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').οnlοad=function() {

vardsSidebar=document.getElementById('dsSidebar');

dsSidebar.οnmοuseοver=function() {

startMove(0, 24);

}

dsSidebar.οnmοuseοut=function() {

startMove(-200, -24);

}

moveBtn();

}

喜欢请用微信打赏

打
赏