Ответы пользователя по тегу CSS
  • Как сделать поворот картинки в виде стрелки за указателем мыши?

    ch1sel
    @ch1sel
    probability is extremely small
    Отличный пример ссылка:
    <!DOCTYPE HTML>
    
    <html>
    
    <head>
      <title>Untitled</title>
      <meta charset="utf-8">
      <style type="text/css">
      img{
        width: 128px;
      }
    
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script>
    (function($) {
        $.fn.rotateImg = function(options) {
            var defaults = {deg : 0};
      	    var settings = $.extend( {}, defaults, options );
            return this.each(function() {
                var img = $(this).css({position: 'absolute'});
                var imgpos = img.position();
                var x0, y0;
                $(window).load(function() {
                    x0 = imgpos.left + img.width() / 2;
                    y0 = imgpos.top + img.height() / 2
                });
                var x, y, x1, y1, r;
                $("html").mousemove(function(e) {
                    x1 = e.pageX;
                    y1 = e.pageY;
                    x = x1 - x0;
                    y = y1 - y0;
                    r = 180 + settings.deg - 180 / Math.PI * Math.atan2(y, x);
                    img.css("transform", "rotate(-" + r + "deg)");
                    img.css("-moz-transform", "rotate(-" + r + "deg)");
                    img.css("-webkit-transform", "rotate(-" + r + "deg)");
                    img.css("-o-transform", "rotate(-" + r + "deg)")
                })
            })
        }
    })(jQuery);
    
    $(function(){
    function rand(a) {
            return 50 + Math.floor(Math.random() * (a-200))
        }
    var w = $(window).width(), h = $(window).height();
    
    $.each(Array(33),function(indx, element){
    $('<img>',{src : 'http://vignette3.wikia.nocookie.net/assassinscreed/images/e/ec/AcII-common-sword.png/revision/latest?cb=20151018215313&path-prefix=ru',
    css : {top : rand(h),left : rand(w)}
    }).appendTo('body')
    
          });
    
    $('img').rotateImg({deg : 0});//задать угол коррекции если нужно
    });
    
    
      </script>
    </head>
    
    <body>
    
    </body>
    
    </html>
    Ответ написан