快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门24小时娱乐在线打造:javascript实现图片按椭圆形转动



$(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,而这个tot澳门24小时娱乐在线打造pop是上图中蓝色线的长度,也便是橙色的最大年夜长度值

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

由于这个比例值是根据橙色线段的长度得来的。(蓝色线段的值,是固定的,橙色线段的值,是在运动中变更的),以是用它去乘以宽、高、透明度便是可以实现,运动中“相同长度的橙色线段的图片,应该具有相同澳门24小时娱乐在线打造的宽度、高度、透明度。”

由于最小值可能是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(澳门24小时娱乐在线打造allpers*10),让其值在1-10之间

(由于我们这里恰正是十个图片,假如多了,这个公式必要变更一下)

三、完备代码

$(function(){

//中间点横坐标var dotLeft = ($(".container").width()-$(".dot").width())/2-100;

//中间点纵坐标var dotTop =澳门24小时娱乐在线打造 ($(".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

//运运的速率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.澳门24小时娱乐在线打造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下载

您可能还会对下面的文章感兴趣: