• 在页面中旋转的图片效果


    1.概述

    在一些交易平台网站,如淘宝网、拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行。

    2.技术要点

    主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转。

    3.具体实现

    (1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下:

    <script language="javascript"> 
    
    var x1=200; 
    
    var x2=200; 
    
    var timer;
    
    var r=60;
    
    var i = 0; 
    
    function eddyphoto(i) { 
    
                var ob=document.all("divround");
    
                ob.style.posTop = r*Math.sin((i*Math.PI)/180)+x1; 
    
                ob.style.posLeft = r*Math.cos((i*Math.PI)/180)+x2; 
    
                i=i+1;
    
                if (r>100){
    
                      window.clearTimeout(timer);
    
                }
    
                else{
    
                      if (i > 360){
    
                            i = 0;r = r + 1;
    
                      }
    
               timer=setTimeout("eddyphoto("+i+")",10);
    
                }
    
    }
    
    eddyphoto(0);
    
    </script>

    (2)在页面中添加一个层并在层中添加要旋转效果的图片,代码如下:

    <div id="divround" style="50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0">
    
    <img src="temp.jpg">
    
    </div>
  • 相关阅读:
    iOS 远程推送
    iOS 本地推送
    iOS 循环利用的注意事项
    iOS 通知代理执行代理方式时,代理为nil的解决办法
    iOS SSZipArchive
    iOS PushMebaby
    Objective
    Objective
    Objective
    Objective
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5581920.html
Copyright © 2020-2023  润新知