Javascript.RU

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

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

Пользователь Рони предложил, вариант в публикации: ТУТ

Но мне нужно чтобы изображение не крепилось к body, а выводилось простым <img src="ссылка" id="тут id функции вращения в сторону курсора на js">. Которое я смогу разместить в нужном мне месте..

Пример от пользователя Рони:
<!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(1),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>
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2016, 16:16
Аспирант
Отправить личное сообщение для Georgian Посмотреть профиль Найти все сообщения от Georgian
 
Регистрация: 01.03.2015
Сообщений: 49

т.е нужно чтобы я мог указать расположение <img src="ссылка" id=""> с помощью класса="logo" например.. поймите меня правильно. Нужен вариант который бы можно было разместить в любом нужном мне месте.. с помощью id и class а...
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2016, 16:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Georgian,
вам мало примера и пояснений как это сделать в предыдущей вами созданной теме?
зачем создавать новую тему
Как реализовать поворот изображение в сторону курсора
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поворот изображения при наведении курсора Сергей545 Элементы интерфейса 4 04.12.2013 22:00
Смена изображения при наведении курсора Lutsk Элементы интерфейса 4 06.10.2013 21:02
Как плавно пролистать страницу вправо при наведении курсора в правую сторону? Orkhan Элементы интерфейса 2 11.04.2013 12:14
Скрипт для увеличения изображения при наведении курсора TypucT Javascript под браузер 1 10.10.2011 15:29
Вращение изображения qwermjk Общие вопросы Javascript 10 06.08.2010 15:45