Question

div旋转，点击按钮点击一下所有的div都移动一格，为什么我写的代码只能点击一次，再点击就没有效果了？

代码如下：$(function(){ var xx=$(".div1").width()/2; var yy=$(".div1").height()/2; var radius=250; var start=0; var jiaodu=360/$(".img").length; var nn=1; var str=[]; var hudu=jiaodu*Math.PI/180; $(".img").each(function(i,ele){ $(this).css({ "left":Math.sin((hudu*i))*radius+xx, "top":Math.cos((hudu*i))*radius+yy }); }) $(".shang").click(function(){ $(".img").each(function(i,ele){ $(this).css({ "left":Math.sin((hudu*(i+1)))*radius+xx, "top":Math.cos((hudu*(i+1)))*radius+yy }); }) })

Answer 1

只有i是变量  其他设置的都是常量, 并且i每次循环只都是固定10个数, 所以算下来你给每个img修改的css都是一样的

那么假设一开始你的其中一个img的left为0, 你点击后赋值为10px, 那么你的img向右10px, 再点击赋值的还是10px, 但是你的img已经在10px的位置了  所以不动了,如果你赋值的是20px,即你当前img的left+10px,  那么他才会从10px的位置移动到20px的位置, 移动10个像素点

修改建议

红色箭头那相应加上当前img的对应的left和top

注: 当前img的对应的left和top的查询, 必须写在黄色箭头内, 这样每次点击都会重新查询, 写在外面就只会在页面加载的时候查询一次了

追问

你好，您说的当前img的对应的left和top怎么获取呢？
我在想是不是我写的代码：
"left":Math.sin((hudu*(i+1)))*radius+xx,里面的(hudu*(i+1)，是不是需要加个循环啊？因为我想做的是10个div组成的圆，没点击一次，这10个圆就转360/10度，二我写的里面只能点击一次，不能在点击，是不是缺个循环？

追答

不是的, 是因为每次你点击, 给每个div赋值的值是相同的

var a = 0;

你现在每次都是 a=10

让你加上当前left是为了

a+10 // 10

a+10 // 20

a+10 // 30

....

获取当前left:就是: $(this).css('left')

另外你的这个页面写的很复杂了

旋转10个div, 可以写在一个div里, 旋转这个大div 就行了, 不会布局可以直接截张大图, 用img标签引用, 旋转这个img一样的

另外用css3的旋转来做    transform: rotate(45deg); // 顺时针旋转45°的意思  不要计算left和top这种写 什么sin cos 太复杂了

追问

你好，谢谢你的回答，css动画的效果我做出来了，我现在在学习jquery，想用jquery来实现点击按钮，旋转的效果，请问用jquery还有什么其他简洁的办法吗？

追答

jq就是获取标签, 赋值事件, 没啥特别困难的, 记一下常用的几个方法, 忘了就百度, 注意一下this的指向, 没什么特别内涵的东西了
写的话方面不用css的动画, 用jq就是改变元素css或者改变元素style, 没什么简洁的办法, 除了用一些动画插件, 当然都是些简单的特效不能自定义
你当前这个问题的动画写法 最规整的方法就是用大div包裹, 然后让大div旋转
还有一个技巧 不想写css3的动画 还想有css3的动画效果
比如你给img的left 赋值0->10px 他会瞬间到10px的位置
你给这个img加上 transition: all 0.5s; 这个css属性, 他就会用0.5秒时间渐渐的从0到10px移动
这个属性叫过渡

追问

谢谢，你的回答

Answer 2

因为角度是一个定值，所以弧度是一个定值，所以left,top都是定值。

追问

你好，能说的具体一点吗？

追答

你设置的角度是一个定值啊，没变，之后怎么让其他元素变

追问

你好，那请问该怎么修改呢？

追答

设置变量num记录点击次数，每次做完点击事件后，让角度变化num++; jiaodu=360/$(".img").length *num

追问

谢谢，你的回答

Answer 3

$(function(){
   var xx=$(".div1").width()/2;
   var yy=$(".div1").height()/2;
   var radius=250;
   var start=0;
   var jiaodu=360/$(".img").length;
   var nn=1;
   var str=[];
   var hudu=jiaodu*Math.PI/180;
   $(".img").each(function(i,ele){
      $(ele).css({
         "left":Math.sin(hudu*i)*radius+xx,
         "top":Math.cos(hudu*i)*radius+yy
      });
   });
   $(".shang").click(function(){
      $(".img").each(function(i,ele){
         $(ele).css({
            "left":Math.sin(hudu*(nn+i))*radius+xx,
            "top":Math.cos(hudu*(nn+i))*radius+yy
         });
      });
      nn=(nn+1)%$(".img").length;
   });
});