javascript-按圓形排列DIV元素(三)實例---- 圖片按橢圓形轉動

$(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});

 

效果圖：

 

分析圖：

上圖中：

黑色：是外層容器;

黃色：是需要按橢圓運動的圖片

橙色：每個圖片元素距離容器頂部的距離

紫色：長半徑或短半徑;

藍色：圖片距離容器頂部最大的距離

綠色：坐標軸;

白色：橢圓運動軌跡;

 

一、原理分析：

　　1.1按橢圓運運

　　前面兩個隨筆分析了“圓形排列”和“按圓形運動”，知道了“排列”和“運動”這兩個以后，再來看這個實例應該就有基礎了。

　　根據前面一篇隨筆的分析，圓形運去的公式如下：

$(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});

(如果不清楚這個公式，可以看前面寫的一篇“運動”);

　　現在我們是要按橢圓運運，還能不能套用上面的公式呢？？

　　可以，但……需要有點點變化.

　　橢圓和圓形的區別是什么？

　　是半徑;圓只有一個半徑，而橢圓有兩個，一個長半徑，一個短半徑，如上圖中的OA和OB，紫色線段;

　　所以公式里面半徑需要替換成，長半徑和短半徑;其它都無變化，如下：

$(this).css({"left":Math.sin((ahd*index+ainhd))*OB+dotLeft,"top":Math.cos((ahd*index+ainhd))*OA+dotTop});

　　2.2 排列時寬度和透明度的變化

　　橢圓里排列的圖片，寬度和透明度的變化有什么規律，或者說是特點？

　　是距離容器頂部的距離;如上圖中，橙色的線段長度。通過觀察發現，在運運過程中，具有相同長度的橙色線段的圖片，應該具有相同的寬度、高度、透明度。

　　那么我們就通過這個橙色線段的，來設定圖片的寬、高、透明度;

　　這里的寬、高、透明度的變化是一個比例的變化，所以我們需要一個比例值，這個比例值為1的時候，去乘以圖片的寬和高，就是圖片原始的大小，如果比例值小於1，那么圖片的寬度就應該是小於正常圖片的大小。

　　如何得到這個比例值?

　　用橙色線段的長度，去除以藍色線段的長度; 因為藍色線段的長度是橙色線段的最大長度;，所以這個比例值，是在0-1之間的數;同時也滿足上面提到的，相同橙色的線段長度，應該有相同的寬、高、透明度;

　　如下公式是求出每一個圖片的距離頂部的值，即上圖中橙色線估的長度;

(Math.cos((ahd*index+ainhd))*b+dotTop)

如下公式是求出這個關鍵的比例值allpers,而這個totpop是上圖中藍色線的長度，也就是橙色的最大長度值

var allpers = (Math.cos((ahd*index+ainhd))*b+dotTop)/totTop;

因為這個比例值是根據橙色線段的長度得來的。（藍色線段的值，是固定的，橙色線段的值，是在運動中變化的），所以用它去乘以寬、高、透明度就是可以實現，運動中“相同長度的橙色線段的圖片，應該具有相同的寬度、高度、透明度。”

因為最小值可能是0.000幾，所以要用一個函數處理下：

var wpers = Math.max(0.1,allpers);
var hpers = Math.max(0.1,allpers);

 

$(this).css({
                    "width":wpers*wid,
                    "height":hpers*hei,
                    "opacity":allpers
                });

 

　　2.3 索引值

　　視覺上距離我們最近的圖片，應該是在最上層，即絕對定位的z-index應該是最大，反之而最小，因為這個值也是隨圖片運動而變化的，所以我們就用到上面的allpers比例值，這個值是0-1之間的，所以我們再用一個函數處理一下：

　　Math.ceil(allpers*10)，讓其值在1-10之間 

　　（因為我們這里正好是十個圖片，如果多了，這個公式需要變化一下）

 

三、完整代碼

$(function(){
        //中心點橫坐標
        var dotLeft = ($(".container").width()-$(".dot").width())/2-100;
        //中心點縱坐標
        var dotTop = ($(".container").height()-$(".dot").height())/2-100;
        //橢圓長邊
        a = 460;
        //橢圓短邊
        b = 120;
        //起始角度
        var stard = 0;

        //每一個BOX對應的角度;
        var avd = 360/$(".container img").length;
        //每一個BOX對應的弧度;
        var ahd = avd*Math.PI/180;
        //運動的速度
        var speed = 2;
        //圖片的寬高
        var wid = $(".container img").width();
        var hei = $(".container img").height();
        //總的TOP值
        var totTop = dotTop+100;
        
    

        //設置圓的中心點的位置
        $(".dot").css({"left":dotLeft,"top":dotTop});

        
        //運動函數
        var fun_animat = function(){
            
            speed = speed<360?speed:2;
            
            //運運的速度
            speed+=2;
            //運動距離，即運動的弧度數;
            var ainhd = speed*Math.PI/180;
            
            //按速度來定位DIV元素
            $(".container img").each(function(index, element){
                var allpers = (Math.cos((ahd*index+ainhd))*b+dotTop)/totTop;
                var wpers = Math.max(0.1,allpers);
                var hpers = Math.max(0.1,allpers);
                $(this).css({
                    "left":Math.sin((ahd*index+ainhd))*a+dotLeft,
                    "top":Math.cos((ahd*index+ainhd))*b+dotTop,
                    "z-index":Math.ceil(allpers*10),
                    "width":wpers*wid,
                    "height":hpers*hei,
                    "opacity":allpers
                });
             });
        }
        
        
        //定時調用運動函數
        var setAnimate = setInterval(fun_animat,100);
    })

弄清原理后，代碼量其實很少！~~

DEMO下載