Записи

<table width="500" height="500" class="colorborder"><tr>
<td width="500" height="400" id="vgipnsnowpanel" class="colorborder">
<img style="height: 400px; position: absolute; z-index: 25; top: 0px; left: 50px; cursor:pointer;"
 id="vgipnimpsnow1" src="/public/gipnose/gipnose.png" >
</td></tr>
 <tr>
 <td width="500" align="center">
 <span style="color: rgb(0,0,255);">темп: </span><input type="range" id="vgipnparam4" max="20" min="1" value="10"
 oninput="{document.getElementById('vgipnspanparam4').innerHTML = document.getElementById('vgipnparam4').value;
 vgipnrotate = document.getElementById('vgipnparam4').value/100;}" />
 <span id="vgipnspanparam4" style="color: rgb(0,0,255);">10</span>
 <input value="start" onclick="vgipnmenaClick()" type="button" id="vgipnStart">
 </td>
 </tr>
</table>

<script>
var vgipnrCub = 100;
var vgipnxCub = 0;
var vgipnflagStart = false;
function vgipnmenaClick() {
 if (vgipnflagStart) {
 vgipnflagStart = false;
 document.getElementById('vgipnStart').value = "start";
 } else {
 vgipnflagStart = true;
 document.getElementById('vgipnStart').value = "stop";
 }
}
function vgipnupdate() {
//add
function getOffset(elem) {
 if (elem.getBoundingClientRect) {
 return getOffsetRect(elem)
 } else {
 return getOffsetSum(elem)
 }
}
function getOffsetSum(elem) {
 var top=0, left=0
 while(elem) {
 top = top + parseInt(elem.offsetTop)
 left = left + parseInt(elem.offsetLeft)
 elem = elem.offsetParent
 }
 return {top: top, left: left}
}
function getOffsetRect(elem) {
 var box = elem.getBoundingClientRect()
 var body = document.body
 var docElem = document.documentElement
 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0
 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft
 return { top: Math.round(top), left: Math.round(left) }
}
//end add
 var vgipnelm = document.getElementById('vgipnsnowpanel');
 var vgipncoords = getOffset(vgipnelm); 
 document.getElementById('vgipnimpsnow1').style.top = vgipncoords.top + "px";
 document.getElementById('vgipnimpsnow1').style.left = vgipnxCub + vgipncoords.left + "px";
 document.getElementById('vgipnimpsnow1').style.transform = "rotate("+vgipnrCub+"deg)";
 requestAnimationFrame(vgipnupdate); 
}
vgipnupdate();

var vgipntimer = setInterval(vgipnAnim, 5);
var vgipntimertag = 0;
var vgipntimertagstep = 100;
var vgipnrotate = 0.1;
var vgipntimertagR = 0;
var vgipntimertagstepR = 360;
function vgipnAnim() {
if (vgipnflagStart) {
 vgipntimertag = vgipntimertag + vgipnrotate;
 if (vgipntimertag > vgipntimertagstep) vgipnrotate = -1*vgipnrotate;
 if (vgipntimertag < 0) vgipnrotate = -1*vgipnrotate;
 vgipnxCub = vgipnxCub + vgipnrotate; 
//
if (vgipnrotate > 0) {
vgipntimertagR = vgipntimertagR + vgipnrotate*10;
} else {
vgipntimertagR = vgipntimertagR - vgipnrotate*10;
}
if (vgipntimertagR > vgipntimertagstepR) vgipntimertagR = 0;
vgipnrCub = vgipntimertagR;
}
}
</script>