87,904
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
rihaduo202 2013-07-03
- 打赏
- 举报
好效果...
cllover 2013-07-03
- 打赏
- 举报
想把具体的数值换成百分比
cllover 2013-07-03
- 打赏
- 举报
额 有人么。。。
wohuifude123 2013-07-03
- 打赏
- 举报
通过这两句
var sinR = Math.sin(r * i + ccR);
var cosR = Math.cos(r * i + ccR);
外加他的算法产生弧度形成效果
这算法是估计是大学学的
换成百分比，需要把那固定数字换成变量，再计算给变量赋值
主要还是他那弧度算法真的比较麻烦
程老师2088 2013-07-03
- 打赏
- 举报
位置就是坐标平移的算法，至于平滑效果我觉得他做就挺好~
或者也可以用jquery做出平滑运动的效果
cllover 2013-07-03
- 打赏
- 举报
最核心的那段ccR的几何算法看不懂，而且对旋转的效果怎么出来的也不知道，单只是坐标变换没有转动的效果
dope421 2013-07-03
- 打赏
- 举报
你说的是那种旋转哦，我以为你说的另外一种。
dope421 2013-07-03
- 打赏
- 举报
http://6tail.cn/demos/photos/photos.html
cllover 2013-07-03
- 打赏
- 举报
cR 和ccR各是什么啊
一天要饭生活又开始啦 2013-07-02
- 打赏
- 举报
cllover 2013-07-02
- 打赏
- 举报
能不能帮我修改成正圆形，无论浏览器宽高怎么变化位置都在屏幕中心？
_沫尘 2013-06-25
- 打赏
- 举报
纠错 6楼错字
应为：几何知识
_沫尘 2013-06-25
- 打赏
- 举报
4楼已经说的差不多了，
如果你要完全弄明白原理，必须回去复习初中的集合知识
如果是为了项目中运用，那看看4楼的注释就会用了
cllover 2013-06-25
- 打赏
- 举报
能给出详细的注释么？ 椭圆圆心在哪？坐标系是怎么建立的？
gr1532879 2013-06-25
- 打赏
- 举报
简单加了一下注释,基本应该能看懂了,看了这代码又感觉初中数学白学了....全忘记了.....
/*
总体来说可以认为把一个容器作为一个圆,然后分割为多份,根据其平分后的角度计算弧度从而计算出相对圆心的偏离量,达到定位
*/
var len;//小方块个数
var showerObj;//整体容器
var listObj;//所有小方块
var showerWidth = 800;//整体宽度
var showerHeight = 400;//整体高度
var r;//每个方块的弧度标准
var cR = 0;
var ccR = 0;
//
var timer = 0;
window.onload = function () {
//获取整体容器
showerObj = document.getElementById("show");
//获取容器内所有小方块
listObj = showerObj.getElementsByTagName("div");
//获取方块个数
len = listObj.length;
//根据方块个数每个方块的弧度标准
r = Math.PI / 180 * 360 / len;
//循环所有小方块
for (var i = 0; i < len; i++) {
//获取当前小方块
var item = listObj[i];
//根据弧度与角标计算出其距离整体容器中心的偏离量(上下偏移)
item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2 - 20 + "px";
//左右偏移
item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 - 30 + "px";
//计算器相对原点的偏移数
item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);
//对应的点击事件
item.onclick = function () {
//根据当前元素的偏移数,计算出需要转动的次数,有多少次则调用多少次rotate方法
cR = Math.PI / 2 - this.rotate;
//设置循环调用转动时的动画效果,间隔为10毫秒,并设定timer变量,用于转动至指定位置时(cR变量控制)停止
timer || (timer = setInterval(rotate, 10));
}
}
//计算整体容器的中心位置(X轴)
var rX = showerObj.offsetLeft + showerWidth / 2;
//(Y轴)
var ry = showerObj.offsetTop + showerHeight / 2;
//点击时动画效果(都是三角函数计算,就不细写了)
var rotate = function () {
ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);
if (cR - ccR < 0) cR = cR + 2 * Math.PI;
if (cR - ccR < Math.PI) {
ccR = ccR + (cR - ccR) / 19;
} else {
ccR = ccR - (2 * Math.PI + ccR - cR) / 19;
}
if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI / 720) {
ccR = cR;
clearInterval(timer);
timer = 0;
}
for (var i = 0; i < len; i++) {
var item = listObj[i];
var w, h;
var sinR = Math.sin(r * i + ccR);
var cosR = Math.cos(r * i + ccR);
w = 60 + 0.6 * 60 * sinR;
h = (40 + 0.6 * 40 * sinR);
item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR * showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + ";";
}
}
document.getElementById("l").onclick = function () {
cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);
timer || (timer = setInterval(rotate, 10));
}
document.getElementById("r").onclick = function () {
cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);
timer || (timer = setInterval(rotate, 10));
}
rotate();
}
_沫尘 2013-06-25
- 打赏
- 举报
一堆图片，用position:relative 定位top left
然后用JS动态改变 top和left的值 这值根据当前位置的left和top计算出来，计算的依据是整个图片组围绕圆旋转（水平方向和竖直方向半径不一样，所以是个椭圆旋转）根据当前位置的left和top可以判断是到了水平方向还是到了竖直方向，然后更改计算top 和left方法中的半径值 计算top和left用Math.PI和半径r相关的公式（数学知识，圆相关的公式）
xuzuning 2013-06-25
- 打赏
- 举报
坐标平移，看看代码就知道了
再看我一眼 2013-06-25
- 打赏
- 举报
确实很炫 mark一下关注
另外京东上边焦点图的新的滚动效果也很炫 不知道怎么做的
