изменить размер изображения и сохранить его с новым размером

Question

изменить размер изображения и сохранить его с новым размером

0

У меня есть изображение с определенными значениями ширины и высоты <img id="image" width="500" height="100"/>, и я хочу изменить размер этого изображения на новые значения и сохранить их с этим изменяет бесконечное время,

Я использовал .effect() как это.

$( document ).click(function() {
$( "#image" ).effect( "size", {
to: { width: 200, height: 60 }
}, 1000 );
});

но, к сожалению, кажется, что это ограниченная функция времени, и изображение возвращается к первоначальному размеру.

Спасибо, спасибо.

ОБНОВИТЬ:

Сценарий о том, что со мной происходит: http://fiddle.jshell.net/SdHGK/

Mahmoud 22 сен. 2013, в 17:43

Источник

Теги:

jquery

html

css

image

4 ответа

2

$(document).click(function() {
  $( "#toggle" ).animate({ width: '200px', height: '60px'}, 1000 );
});

mdesdev 22 сен. 2013, в 12:51

1

Вы можете попробовать использовать два имени класса для каждого размера, а затем щелкнуть, изменив имя класса.

function changeSize () {
var myId = document.getElementById("Your Id Goes Here");
myId.className="mySecondClassname";
}

Вы также можете сделать это с помощью Css3.

#yourImage {
    width:50px;
    height:200px;
    border:solid red 1px;
    transition:what you want to transition Duration; //probably width and height
}

    #yourImage:target {
    width:200px;
    height:400px;
}

Вам нужно будет добавить символ "#" в контейнер изображения, который отображается в URL-адресе при нажатии.

Skwisgaar 22 сен. 2013, в 15:08

1

что-то вроде этого? http://jsfiddle.net/8NdHU/

$('img').on('click', function(){
    $(this).css('width', '200%'); 
});

ОБНОВИТЬ

http://jsfiddle.net/8NdHU/1/

$('img').on('click', function(){
    $(this).animate({
        width: '100%'
    }, 5000); 
});

Chanckjh 22 сен. 2013, в 13:08

0

да, но с эффектом как в скрипке fiddle.jshell.net/SdHGK
Mahmoud 22 сен. 2013, в 15:23
0

обновил код
Chanckjh 22 сен. 2013, в 15:29

Ещё вопросы

да, но с эффектом как в скрипке fiddle.jshell.net/SdHGK

zzlalani · Accepted Answer · 2013-09-22T13-23-00.000Z

Посмотри на это

$( document ).click(function() {
  $( "#toggle" ).effect( "size", {
    to: { width: 200, height: 60 }
  },'slow', function () {
      $("#toggle").css({'width':'200px', 'height': '60px'});
  });
});

http://fiddle.jshell.net/SdHGK/2/

PS: Идея взята из ответа Chanckjh и из http://jqueryui.com/effect/