Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Cần giúp] Smooth javascript rotate?

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Azenis Bm, 6/7/13.

Lượt xem: 2,007

  1. Azenis Bm Thành viên cấp 1

    mình đang làm một cái la bàn sẽ rotate đến một góc nhất định khi ấn nút.....mình chả biết j về javascript nên edit code của mấy thằng trên mạng thế này :D

    <script type="text/javascript">
    var interval;
    function StartRotation() {
    interval = setInterval(start, 0);
    }
    function start() {
    document.getElementById("ImgRotate").style.MozTransform = "rotate(30deg)";
    document.getElementById("ImgRotate").style.webkitTransform = "rotate(30deg)";
    }
    </script>

    <img alt="Img" id="ImgRotate" src="images/map1.png" width="185px"
    height="148px" />
    <br />
    <br />
    <input type="button" value="Start" onclick="StartRotation();" />

    nhưng mình muốn làm smooth giống như transform ý (có thể điều chỉnh giá trị smooth dc càng tốt)..... mong các bro coder giúp đỡ

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Azenis Bm, 6/7/13
    #1
  2. Azenis Bm

    Azenis Bm Thành viên cấp 1

    tạm thời thì cái smooth đã ổn nhưng lại có vấn đề khác @@..... code cả buổi chiều:

    CSS

    .rotate1 {
    transform: rotate(3.2rad);
    transition:.5s;
    }
    .rotate2 {
    transform: rotate(-5.3rad);
    transition:.5s;
    }
    .rotate3 {
    transform: rotate(0.4rad);
    transition:.5s;
    }
    .rotate4 {
    transform: rotate(-4.6rad);
    transition:.5s;
    }
    .rotate5 {
    transform: rotate(3.4rad);
    transition:.5s;
    }
    </style>


    HTML

    <img class="rotate" src="images/compass2.png" />

    <button id="continue1">1</button>
    <button id="continue2">2</button>
    <button id="continue3">3</button>
    <button id="continue4">4</button>
    <button id="continue5">5</button>


    JAVA SCRIPT

    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
    $("#continue1").click(function(){
    $(".rotate").toggleClass("rotate1");
    });
    $("#continue2").click(function(){
    $(".rotate").toggleClass("rotate2");
    });
    $("#continue3").click(function(){
    $(".rotate").toggleClass("rotate3");
    });
    $("#continue4").click(function(){
    $(".rotate").toggleClass("rotate4");
    });
    $("#continue5").click(function(){
    $(".rotate").toggleClass("rotate5");
    });
    </script>

    minh chỉ nhờ bro edit lại code tý vì mình k hiểu sao mấy cái nút ấn lần thứ 2 sau khi đã ấn nút khác thì k dc.....??? cái này cũng hơi khó diễn tả @@... nên mình up code lên đây http://jsfiddle.net/HCP46/8/
    Azenis Bm, 6/7/13
    #2

Ủng hộ diễn đàn