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


Posted in Javascript onDecember 02, 2016

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

  如何得到这个比例值?

用橙色线段的长度,去除以蓝色线段的长度; 因为蓝色线段的长度是橙色线段的最大长度;,所以这个比例值,是在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);
 })

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

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

Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 #Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 #Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 #Javascript
详解JavaScript中数组的reduce方法
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 #Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 #Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php中adodbzip类实例
2014/12/08 PHP
微信支付开发订单查询实例
2016/07/12 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python实现Kmeans聚类算法
2020/06/10 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python 读取.nii格式图像实例
2020/07/01 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
python中Mako库实例用法
2020/12/31 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
班长岗位职责
2013/11/10 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
顶岗实习计划书
2015/01/16 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
python字典进行运算原理及实例分享
2021/08/02 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers