基于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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
Js切换功能的简单方法
Nov 23 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
浅析Python基础-流程控制
2016/03/18 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python如何写个俄罗斯方块
2020/11/06 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
大学生自荐信
2013/12/11 职场文书
团日活动策划书
2014/02/01 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2015年测量员工作总结
2015/05/23 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript