ddale,
Забацайте гиф анимацию итогового действия, вместе с курсором пользователя - имхо объяснения будут короче... или попросите кого нибудь пояснив задачу - иначе разбор полётов будет бесконечным, Итоговая реализация в точном соотвествии с гифкой в разы кароче(как показывает практика |
Deff,
Гифку нельзя. Потому что изображения будет вставлять пользователь и изображения будут и .jpg и .png. Да еще буду делать, чтобы при клике изображение перелистывались. Нужно универсальное решение. Или просто подсказка. Я совсем сбился. Думал сначала, сделать обертку под изображение с шириной в 110% и позиционирование в этой обертке самого изображения так, чтобы оно не влезало с обоих сторон. Но вариант гиблый.. :( |
ddale,
Цитата:
|
|
ddale,
Вродь понял про горизонталь - буду думать... Зы - а вопрос такой: Начальная позиция изображения большего обрамлялки - по центру или по левому краю ? |
Deff,
Начальная позиция по центру. |
Это? http://demos111.mootools.net/Scroller (нижний пример)
|
Serg_pnz,
Вроде да. Только вот я не пойму как его встроить, чтобы он заработал. Я загрузил "MooTools Core 1.4.5 without compatibility" и подключил. А также взял JS: window.addEvent('domready', function(){ var scroll1 = new Scroller('drag', {area: 150, velocity: 1}); var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1}); // Drag $('drag').addEvent('mousedown', function() { this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move'); scroll1.start(); }); $('drag').addEvent('mouseup', function() { this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move'); scroll1.stop(); }); // Mousemove $('mousemove').addEvent('mouseover', scroll2.start.bind(scroll2)); $('mousemove').addEvent('mouseout', scroll2.stop.bind(scroll2)); }); HTML: <div id="mousemove"> <img alt="" src="images/content/img_1.jpg" class="inside move"> </div> CSS: #mousemove, #drag { width: 100%; height: 100%; border: 0; overflow: hidden; margin: 0 auto; } #drag { cursor: url(openhand.cur), move; } .inside { width: 2000px; height: 1000px; } .move { /*background: #eee url(pattern1.gif);*/ } .drag { } Вылезает ошибка Цитата:
Вот строка 28: $('drag').addEvent('mousedown', function() { |
ddale,
mootools с jQuery не оч в дружбе |
Deff,
В том-то и дело, что я отключил всё что относится к jQuery |
ddale,
пример из 1.11 и для этой версии нет "драйвера", что бы работало в 1.2 и выше. Тут надо смотреть как подключать http://mootools.net/docs/more/Fx/Fx.Scroll и тогда нужен еще компонент Fx.Scroll из More (собрать можно тут http://mootools.net/more/) |
http://www.magictoolbox.com/magiczoomplus/
Наводить на кроссовку |
Разве такое надо было? Ну тогда у меня тоже есть подобный скрипт (двигать большую схему или прямоугольник в превью) http://trei003.jcase.ru/orgchart/
|
Deff,
Serg_pnz, не ребят, не то. но я уже сам всё сделал, спасибо) |
ddale,
хвались) |
Serg_pnz,
HTML <div id="look"> <div id="pano"> <img alt="" src="images/content/img_1.jpg" style=""> </div> <div id="next_img"></div> <div id="prev_img"></div> </div> CSS #look{ position:fixed; width:100%; height:100%; overflow:hidden; } #pano { position: fixed; left: 0; top:0; width: 100%; height:100%; overflow: hidden; cursor: none !important; } #pano img { height:100%;} JS jQuery.preloadImages = function () { if (typeof arguments[arguments.length - 1] == 'function') { var callback = arguments[arguments.length - 1]; } else { var callback = false; } if (typeof arguments[0] == 'object') { var images = arguments[0]; var n = images.length; } else { var images = arguments; var n = images.length - 1; } var not_loaded = n; for (var i = 0; i < n; i++) { jQuery(new Image()).attr('src', images[i]).load(function() { if (--not_loaded < 1 && typeof callback == 'function') { callback(); } }); } } var train_width = 0; var train_timer; var velocity; var max_shift = 0; var x = 0; var flag = 0; var train_img = 0; $.preloadImages(["images/content/img_1.jpg"], function () { $("#pano").css({"visibility":"visible"}); train_img = $("#pano img").width(); $("#pano").css({"width":train_img}); }); //Сдвигаем поезд при каждом обновлении кадра function move_train() { if (max_shift > 0) { x = x + velocity; if (x > 0) x = 0; if (x < (-1*(max_shift))) x = -1*(max_shift); $("#pano").css({"left": x + "px", "width":train_img}); if (velocity > 0) { $("#prev_img").show(); $("#next_img").hide(); } if (velocity == 0) { $("#next_img").hide(); $("#prev_img").hide(); } if (velocity < 0) { $("#next_img").show(); $("#prev_img").hide(); } if(x == 0) { $("#prev_img").hide();} if(x == "-" + max_shift) { $("#next_img").hide();} } } //Функция находит позицию курсора мыши внутри элемента function rPosition(element, mouseX, mouseY) { var offset = $(element).offset(); var x = mouseX - offset.left; var y = mouseY - offset.top; return {'x': x, 'y': y}; } $(function() { $("#next_img").hide(); $("#prev_img").hide(); //Считаем длину поезда, для этого складываем длины всех вагонов train_width = train_width + $("#pano").width(); train_img = $("#pano img").width(); var controller_width = $("#look").width(); x = -1*train_width/2 + controller_width/2; //alert(train_width); $("#pano").css({"left": x + "px", "width":train_img}); //Запускаем цикл анимации если курсор мыши над поездом $("#look").mouseover(function(){ //alert(""); train_timer = window.setInterval("move_train();", 10); }); //Останавливаем цикл анимации если курсор мыши ушел с поезда $("#look").mouseout(function(){ window.clearInterval(train_timer); $("#next_img").hide(); $("#prev_img").hide(); }); $(window).resize(function(){ velocity = 0; max_shift = train_width - $("#look").width(); train_img = $("#pano img").width(); move_train(); }); //Рассчитываем текущую скорость, которая зависит от координаты мышки на поезде $("#look").mousemove(function(e){ train_width = 0; train_width = train_width + $("#pano").width(); //Считаем полудлину поезда, чтобы посчитать скорость, которая с разным знаком в разных половинах поезда var half_width = Math.round($(this).width()/2); var elementCoords = rPosition(this, e.pageX, e.pageY); //Пересчитали максимум, на который можно сдвигать поезд, он зависит от размеров окна max_shift = train_width - $(this).width(); var sign = velocity; //Рассчитываем скорость. Делим на 100, чтобы было плавнее. Скорость будет в пределах от 0 до 9 velocity = Math.round((half_width - elementCoords.x)/100); }); }); Такой скрипт работает, если высота больше ширины. Если ширина больше высоты, то для img нужно присваивать width: 100%, а также адаптировать данный скрипт. Скрипт адаптирован. Но есть реальный вопрос. Необходимо реализовать алгоритм: 1) Получение значений width и height у картинки 2) Сравнение значений 3) width > height - запускам один скрипт, меняем значение width на height у img 4) width < height - запускаем другой скрипт, меняем значение height на width у img |
Цитата:
http://jquery-docs.ru/CSS/height/ Цитата:
http://jquery-docs.ru/CSS/height/#val |
Deff,
Есть какая-нибудь готовая замечательная штука, в которой реализован функционал draggable из jQuery UI + простейший слайдер картинок? |
ddale, "хвались" - подразумевалось в действии)))
http://jquery.page2page.ru/index.php...BD%D1%82%D1%8B там есть замечательная "кнопочка" "Показать код" |
Serg_pnz,
аааа, готовое. не я потом опубликую ссылку на рабочий сайт лучше. не хочу недоделку кривую показывать. -) |
Ребят, через stop().animate() думаю можно будет сообразить. А для места наведения мышки сделать невидимые дивы и на них уже hover повесить.
В общем логика такая будет: HTML: <div class="image_view"> <div class="clear" id="left"></div> <div class="pic"><img src=""></div> <div class="clear" id="right"></div> </div> .image_view { overflow:hidden; position: relative; display:block; } .clear { position:absolute; opacity:0; width:10%; height:100%; z-index:1000; } .clear#left{left:0} .clear#right{right:0} .pic { position:absolute; width:100%; height:100%; overflow:hidden; display:block; } .pic img{ //лучше отцентровать в js, но если все картинки будут статичны - то css тоже сойдет } $(window).ready(function(){ $('#left').hover(function(){ $('.pic').children('img').stop().animate({}, 700); //анимацию уже сам через необходимые свойства допишешь, скорее всего связано с центрованием картинки будет связано еще пару функций... }, function(){ $('.pic').children('img').stop().animate({}, 700); }) $('#right').hover(function(){ $('.pic').children('img').stop().animate({}, 700); }, function(){ $('.pic').children('img').stop().animate({}, 700); }) }) Когда писал это НЕ БЫЛО ДВУХ СТРАНИЦ СООБЩЕНИЙ lol |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 17:15. |