Question

我想创建一个脚本（jQuery）来使用光标在圆圈上移动图像？

代码：

html：

    <div id="carousel">
       <div class="slide"></div>
   </div>

css：

 #carousel{border: dashed 1px;border-radius: 50%;background:linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0,0,255,.3) linear-gradient(90deg,transparent 49%, black 49%, black 51%, transparent 51%);width: 250px;height: 250px;margin:auto;position: relative;}.slide{width: 50px;height: 50px}                   
#carousel .slide{background-size: 100% 100% !important}
#carousel .slide:nth-child(1){position: absolute;top:100px; left:225px; background: url(https://4.bp.blogspot.com/-n7ysjpiiIuk/WTv5FyumGSI/AAAAAAAAADU/RynLbNdpYDUv8Bx4DJ_iczeXmqXfOrf_wCLcB/s1600/1.png) no-repeat;}

https://jsfiddle.net/SaidDev/wp8j66gg/

感谢

Answer 1

代码中的问题是触摸移动和图像旋转之间的偏移

html ：

<div id="carousel">
 <div class="slide"></div>
 <div class="slide"></div>
 <div class="slide"></div>
<div class="slide"></div>

</div>

js ：

    angles = [0,90,180,270];direction='n';
var animate=function()
{
  for (var i = 0; i <= 3; i++) 
    {   

        if(direction=='n'){angles[i]+=1;}
        else if(direction=='p'){angles[i]-=1;}
        an=-angles[i];           
        ang='rotate('+angles[i]+'deg) translate(125px) rotate('+an+'deg)';
        $(".slide").eq(i).css({"transform":ang});
    }
}
animate();


$(function () {
var dragging = false,
    target_wp,
    o_x, o_y, h_x, h_y, last_angle,index;
$('.slide').on("touchstart",function (e) {
    index=$(this).index();
    h_x = e.touches[0].pageX;
    h_y = e.touches[0].pageY; 
    e.preventDefault();
    e.stopPropagation();
    dragging = true;
    target_wp = $(e.target).closest('#carousel');
    if (!target_wp.data("origin")) target_wp.data("origin", {
        left: target_wp.offset().left,
        top: target_wp.offset().top
    });
    o_x = target_wp.data("origin").left;
    o_y = target_wp.data("origin").top; 

    last_angle = target_wp.data("last_angle") || 0;
})

$('.slide').on("touchmove",function (e) {
    if (dragging) {
         s_x = e.touches[0].pageX,
            s_y = e.touches[0].pageY; 
        if (s_x !== o_x && s_y !== o_y) { 
            var s_rad = Math.atan2(s_y - o_y, s_x - o_x); 

            s_rad -= Math.atan2(h_y - o_y, h_x - o_x); 
            s_rad += last_angle; // relative to the last one
            var degree = (s_rad * (360 / (2 * Math.PI)));
            $("h3").text("last_angle"+degree+" | angles["+index+"] : "+angles[index]);

             for (var i = 0; i <= 3; i++) 
                {   
                  var d=angles[i]+degree+10;           
                    an=-d;           
                   ang='rotate('+d+'deg) translate(125px) rotate('+an+'deg)';
                   $(".slide").eq(i).css({"transform":ang});
                 }
        }
    }
}) 

$('.slide').on('touchend',function (e) {
    dragging = false



    var s_rad = Math.atan2(s_y - o_y, s_x - o_x); 
    s_rad -= Math.atan2(h_y - o_y, h_x - o_x); 
    s_rad += last_angle;
    target_wp.data("last_angle", s_rad);
})})

css ：

 .container{margin:auto;margin-top:6%}        #carousel{border: dashed 1px;border-radius: 50%;background:linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0,0,255,.3) linear-gradient(90deg,transparent 49%, black 49%, black 51%, transparent 51%);width: 250px;height: 250px;margin:auto;position: relative;}
  #carousel .slide:nth-child(1){position: absolute;top:100px; left:100px; background: url(https://4.bp.blogspot.com/-n7ysjpiiIuk/WTv5FyumGSI/AAAAAAAAADU/RynLbNdpYDUv8Bx4DJ_iczeXmqXfOrf_wCLcB/s1600/1.png) no-repeat;}  
#carousel .slide:nth-child(2){position: absolute;top:100px; left:100px;background: url(https://2.bp.blogspot.com/-yXT0EHQgQNc/WTv5GJJ9fQI/AAAAAAAAADY/WetEBLET9xwTIWFfBXzfeP4PlfFPDTPEwCLcB/s1600/2.png) no-repeat;} 
 #carousel .slide:nth-child(3){position: absolute;top:100px; left:100px;background: url(https://2.bp.blogspot.com/-feSPwYuIwCA/WTv5Fo0tn9I/AAAAAAAAADQ/ce9avMyBLBoyPlK5AfRRoVOisi3QPDQLACLcB/s1600/3.png) no-repeat;} 
 #carousel .slide:nth-child(4){position: absolute;top:100px; left:100px;background: url(https://3.bp.blogspot.com/-MlzvVekSEqc/WTv5Gl7f1_I/AAAAAAAAADc/Ugmt-pCOo0wq1su8cC3-8N7MyX48indggCLcB/s1600/4.png) no-repeat;} 
 #carousel .slide{background-size: 100% 100% !important}

https://jsfiddle.net/SaidDev/nLf5v43x/1/

我想创建一个脚本来使用光标在圆上移动图像？

1 个答案: