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

效果圖：

分析圖：

上圖中：

黑色：是外層容器;

黃色：是需要按橢圓運(yùn)動(dòng)的圖片

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

紫色：長(zhǎng)半徑或短半徑;

藍(lán)色：圖片距離容器頂部最大的距離

綠色：坐標(biāo)軸;

白色：橢圓運(yùn)動(dòng)軌跡;

一、原理分析：

　　1.1按橢圓運(yùn)運(yùn)

　　前面兩個(gè)隨筆分析了“圓形排列”和“按圓形運(yùn)動(dòng)”，知道了“排列”和“運(yùn)動(dòng)”這兩個(gè)以后，再來(lái)看這個(gè)實(shí)例應(yīng)該就有基礎(chǔ)了。

　　根據(jù)前面一篇隨筆的分析，圓形運(yùn)去的公式如下：

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

(如果不清楚這個(gè)公式，可以看前面寫(xiě)的一篇“運(yùn)動(dòng)”);

　　現(xiàn)在我們是要按橢圓運(yùn)運(yùn)，還能不能套用上面的公式呢？？

　　可以，但……需要有點(diǎn)點(diǎn)變化.

　　橢圓和圓形的區(qū)別是什么？

　　是半徑;圓只有一個(gè)半徑，而橢圓有兩個(gè)，一個(gè)長(zhǎng)半徑，一個(gè)短半徑，如上圖中的OA和OB，紫色線段;

　　所以公式里面半徑需要替換成，長(zhǎng)半徑和短半徑;其它都無(wú)變化，如下：

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

　　2.2 排列時(shí)寬度和透明度的變化

　　橢圓里排列的圖片，寬度和透明度的變化有什么規(guī)律，或者說(shuō)是特點(diǎn)？

　　是距離容器頂部的距離;如上圖中，橙色的線段長(zhǎng)度。通過(guò)觀察發(fā)現(xiàn)，在運(yùn)運(yùn)過(guò)程中，具有相同長(zhǎng)度的橙色線段的圖片，應(yīng)該具有相同的寬度、高度、透明度。

　　那么我們就通過(guò)這個(gè)橙色線段的，來(lái)設(shè)定圖片的寬、高、透明度;

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

　　如何得到這個(gè)比例值?

　　用橙色線段的長(zhǎng)度，去除以藍(lán)色線段的長(zhǎng)度; 因?yàn)樗{(lán)色線段的長(zhǎng)度是橙色線段的最大長(zhǎng)度;，所以這個(gè)比例值，是在0-1之間的數(shù);同時(shí)也滿足上面提到的，相同橙色的線段長(zhǎng)度，應(yīng)該有相同的寬、高、透明度;

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

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

如下公式是求出這個(gè)關(guān)鍵的比例值allpers,而這個(gè)totpop是上圖中藍(lán)色線的長(zhǎng)度，也就是橙色的最大長(zhǎng)度值

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

因?yàn)檫@個(gè)比例值是根據(jù)橙色線段的長(zhǎng)度得來(lái)的。（藍(lán)色線段的值，是固定的，橙色線段的值，是在運(yùn)動(dòng)中變化的），所以用它去乘以寬、高、透明度就是可以實(shí)現(xiàn)，運(yùn)動(dòng)中“相同長(zhǎng)度的橙色線段的圖片，應(yīng)該具有相同的寬度、高度、透明度?！?/p>

因?yàn)樽钚≈悼赡苁?.000幾，所以要用一個(gè)函數(shù)處理下：

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 索引值

　　視覺(jué)上距離我們最近的圖片，應(yīng)該是在最上層，即絕對(duì)定位的z-index應(yīng)該是最大，反之而最小，因?yàn)檫@個(gè)值也是隨圖片運(yùn)動(dòng)而變化的，所以我們就用到上面的allpers比例值，這個(gè)值是0-1之間的，所以我們?cè)儆靡粋€(gè)函數(shù)處理一下：

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

　?。ㄒ?yàn)槲覀冞@里正好是十個(gè)圖片，如果多了，這個(gè)公式需要變化一下）

三、完整代碼

  $(function(){
  //中心點(diǎn)橫坐標(biāo)
  var dotLeft = ($(".container").width()-$(".dot").width())/2-100;
  //中心點(diǎn)縱坐標(biāo)
  var dotTop = ($(".container").height()-$(".dot").height())/2-100;
  //橢圓長(zhǎng)邊
  a = 460;
  //橢圓短邊
  b = 120;
  //起始角度
  var stard = 0;
  //每一個(gè)BOX對(duì)應(yīng)的角度;
  var avd = 360/$(".container img").length;
  //每一個(gè)BOX對(duì)應(yīng)的弧度;
  var ahd = avd*Math.PI/180;
  //運(yùn)動(dòng)的速度
  var speed = 2;
  //圖片的寬高
  var wid = $(".container img").width();
  var hei = $(".container img").height();
  //總的TOP值
  var totTop = dotTop+100;
  //設(shè)置圓的中心點(diǎn)的位置
  $(".dot").css({"left":dotLeft,"top":dotTop});
  //運(yùn)動(dòng)函數(shù)
  var fun_animat = function(){ 
   speed = speed<360?speed:2;
   //運(yùn)運(yùn)的速度
   speed+=2;
   //運(yùn)動(dòng)距離，即運(yùn)動(dòng)的弧度數(shù);
   var ainhd = speed*Math.PI/180; 
   //按速度來(lái)定位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
    });
    });
  }
  //定時(shí)調(diào)用運(yùn)動(dòng)函數(shù)
  var setAnimate = setInterval(fun_animat,100);
 })

    弄清原理后，代碼量其實(shí)很少！~~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，有興趣的朋友可以看下《基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)》和《基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)》謝謝對(duì)腳本之家的支持！

最新評(píng)論