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

效果图:

基于javascript实现按圆形排列DIV元素(三)

分析图:

基于javascript实现按圆形排列DIV元素(三)

上图中:

黑色:是外层容器;

黄色:是需要按椭圆运动的图片

橙色:每个图片元素距离容器顶部的距离

紫色:长半径或短半径;

蓝色:图片距离容器顶部最大的距离

绿色:坐标轴;

白色:椭圆运动轨迹;

一、原理分析:

  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,那么图片的宽度就应该是小于正常图片的大小。

  如何得到这个比例值"htmlcode">

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".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);
 })

    弄清原理后,代码量其实很少!~~

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的朋友可以看下《基于javascript实现按圆形排列DIV元素(一)》和《基于javascript实现按圆形排列DIV元素(二)》谢谢对的支持!

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?