シームレスなラウンドと画像のジッタ

2733 ワード




    
     
    


    
![](img/11.jpg) ![](img/12.jpg) ![](img/13.jpg) ![](img/14.jpg) ![](img/15.jpg)
var imgBox=document.getElementsByClassName('img-box')[0]; var imgs=document.getElementsByTagName('img'); function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ var currentStyle=getComputedStyle(obj); return currentStyle[attr]; } } function scroll(obj){ var timer = setInterval(function(){ var top = getStyle(obj, 'top'); top = parseInt(top); top -= 5; if(top < -180){ top = -180; } obj.style.top = top + 'px'; if(top === -180){ obj.appendChild(obj.children[0]); obj.style.top = 0 + 'px'; } }, 50); } scroll(imgBox) </code></pre> <h3> </h3> <pre><code class="js"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> img{ position: absolute; left: 200px; top: 200px; } </style> </head> <body> ![](3.jpg) <script> function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ var currentStyle = getComputedStyle(obj); return currentStyle[attr]; } } function sheak(obj,attr,position){ var pos=getStyle(obj,attr); pos=parseInt(pos); var arr=[]; for(var i=30;i>0;i=i-2){ arr.push(i); arr.push(-i) } arr.push(0); var num=0; var T=setInterval(function(){ obj.style[attr]=(pos+arr[num])+'px'; num++; if(num==arr.length){ clearInterval(T); position && position(); } },100) } var img=document.getElementsByTagName('img')[0]; var onOff=false; img.onclick=function(){ var bbg=this; if(onOff){ return; } onOff=true; sheak(bbg,'top',function(){ sheak(bbg,'left') }) }