基于javascript實(shí)現(xiàn)按圓形排列DIV元素(三)
$(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è)公式,可以看前面寫的一篇“運(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)該具有相同的寬度、高度、透明度。”
因?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ì)腳本之家的支持!
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
- 基于javascript實(shí)現(xiàn)按圓形排列DIV元素(二)
- JS實(shí)現(xiàn)二維數(shù)組元素的排列組合運(yùn)算簡(jiǎn)單示例
- 特漂亮的JS圖片排列旋轉(zhuǎn)效果代碼
- JS實(shí)現(xiàn)數(shù)組按升序及降序排列的方法
- js實(shí)現(xiàn)簡(jiǎn)單排列組合的方法
- JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法
- JavaScript全排列的六種算法 具體實(shí)現(xiàn)
- JS實(shí)現(xiàn)的數(shù)組全排列輸出算法
- JavaScript如何實(shí)現(xiàn)元素全排列實(shí)例代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)的字符串replaceAll函數(shù)代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的字符串replaceAll函數(shù)代碼分享,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖,本文的主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖,自動(dòng)播放最新的重要?jiǎng)討B(tài),感興趣的小伙伴們可以參考一下2016-04-04???????分享7?個(gè)實(shí)用?TypeScript?單行代碼
這篇文章主要介紹了???????分享7?個(gè)實(shí)用?TypeScript?單行代碼,其中包括泛型、斷言等高級(jí)用法,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-05-05javascript offsetX與layerX區(qū)別
FF沒(méi)有offsetX屬性,有個(gè)layerX屬性,只要將事件源的位置設(shè)置成相對(duì)定位(position:relative)或絕對(duì)定位(position:absolute),兩者結(jié)果就相等,表示事件源相對(duì)于父元素的X坐標(biāo)。2010-03-03ES6知識(shí)點(diǎn)整理之String字符串新增常用方法示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之String字符串新增常用方法,結(jié)合實(shí)例形式分析了ES6字符串String includes,startsWith,endsWith等方法相關(guān)使用技巧,需要的朋友可以參考下2019-07-07javascript replace()用法詳解附實(shí)例代碼
在javascript中,String的函數(shù)replace()簡(jiǎn)直太讓人喜愛(ài)了。它靈活而強(qiáng)大的字符替換處理能力,讓我不禁想向大家介紹它。2008-10-10