Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2016, 00:38
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

Как реализовать поворот изображение в сторону курсора
В общем я использую изображение стрелки.

Как сделать вращение стрелки за курсором.
Чтобы стрелка все время была направлена на курсор и меняла свой угол плавно. в сторону курсора..
Никаких движений и т.д Чтобы у курсора было одно указанное мной место. И оно просто меняла угол в сторону курсора..
Плавно. как и само движение курсора.

Последний раз редактировалось Georgian, 23.01.2016 в 00:52.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2016, 01:01
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

приближу к цели. Нужно что-то типа этого: ДЕМО

только чтобы вращение не останавливалось никогда.. И следило за курсором постоянно.. без ограниченного пространства..
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2016, 03:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

rotateImg поворот изображения в сторону курсора
Georgian,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  img{
    width: 128px;
  }

  </style>
  <script src="https://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>

Последний раз редактировалось рони, 22.03.2018 в 19:38.
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2016, 03:04
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Рони Крут!!
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2016, 11:37
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

Спасибо вам ребята =) а можно ли выводить эту шпагу id'ом к изображению, разместив в body ?

Последний раз редактировалось Georgian, 23.01.2016 в 11:40.
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2016, 11:40
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

как это возможно?
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2016, 11:45
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

и чтобы была одна шпага в указанном мной месте..
Ответить с цитированием
  #8 (permalink)  
Старый 23.01.2016, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

Сообщение от Georgian
эту шпагу id'ом к изображению
да
Сообщение от Georgian
и чтобы была одна шпага в указанном мной месте..
строки 45-55 убрать в строке 57 указать id c #
Ответить с цитированием
  #9 (permalink)  
Старый 23.01.2016, 12:05
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

нужно что-то типа этого..
(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(1),function(indx, element){
$('<img>',{src : 'images/marrow.png',
css : {top : rand(h),left : rand(w)}
}).appendTo('#inner')

});

$('img').rotateImg({deg : 0});
});
Ответить с цитированием
  #10 (permalink)  
Старый 23.01.2016, 12:09
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 46

я новичек рони) только начинаю.. плиз покажи как это) плииз)
у меня не выходит
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
как реализовать связные списки? br1an jQuery 0 27.06.2013 05:11
Как это реализовать на JS Bezlyj Общие вопросы Javascript 6 06.03.2012 07:20
Мозаичное изображение (как в яндекс, гугл картах) Lottarend Общие вопросы Javascript 16 10.01.2012 08:11
Раскрывающееся меню, как переставить на другую сторону? Resager Events/DOM/Window 8 22.08.2008 20:56