javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动

$(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,而这个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);})

弄清原理后，代码量其实很少！~~

DEMO下载

javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动相关推荐

javascript-按圆形排列DIV元素(一)---- 分析
效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点o; 圆心角:角NOG; 黄色:需要按圆形排列的,绝对定位的DI ...
html中排列div一行三个,CSS在一行中创建3个div块，div结构
6 个答案: 答案 0 :(得分:9) 有许多方法可以做到这一点,其中一种方法是使用relative-float Block1 Block2 Block3 这会产生类似的内容答案 1 :(得分:3) ...
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
JavaScript闭包的详细理解一.原理:闭包函数--指有权访问私有函数里面的变量和对象还有方法等:通俗的讲就是突破私有函数的作用域,让函数外面能够使用函数里面的变量及方法. 1.第一种创建方式 ...
div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
在一个div后面追加html,javascript div元素后追加节点
例子解释: 这段代码创建新的元素: var para=document.createElement("p"); 如需向元素添加文本,您必须首先创建文本节点.这段代码创建了一个文 ...
html toggle自动隐藏,Javascript / HTML – 切换可见性(当另一个div元素呈现可见时自动导致一个div元素隐藏)...
基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性. 我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点 ...
如何使用 JavaScript 显示/隐藏或切换 DIV 元素
在 jQuery 中,您可以使用 .toggle() 方法来切换元素,任何元素.但是,如果您正在寻找纯 JavaScript 解决方案,那么这里就是.我在这里分享一个简单的代码,它展示了使用 Java ...
javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){this.name = name;this.age = age ...
html5--1.18 div元素与布局
1.18 div元素与布局 1.元素的分类 2.div元素与布局 1.元素的分类块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...

javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动

javascript-按圆形排列DIV元素(三)实例---- 图片按椭圆形转动相关推荐

最新文章

热门文章