jQuery затухание части изображения в процентах?

Question

Каким будет лучший способ сделать «индикатор выполнения» с изображением вместо столбца?

Я бы хотел, чтобы процентная переменная определяла, насколько непрозрачна часть изображения. Другими словами, если% = 33%, нижние 33% изображения будут нормальными, но верхние 66% будут слегка блеклыми.

Спасибо за помощь!

R

Answer 1

Вот простой способ сделать это:

http://jsfiddle.net/DQ4Fh/13/

По сути, просто сложите два div с одним и тем же фоновым изображением (одно расположенное сверху и одно расположенное снизу), сделайте одно менее непрозрачным и измените высоту двух изображений, чтобы контролировать, сколько каждого из них экспонируется.

на производстве вы должны использовать метод jquery animate в функции setProgress, чтобы он обновлялся плавно. CSS, который я использовал, чтобы установить прозрачность, не является кросс-браузерным, вы должны обновить его или использовать jquery, чтобы установить прозрачность затемненного div.

Answer 2

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

var opacityvalue;//the opacity [a range from 0 (for invisible) to 1 (for visible)]
$('#image').style.opacity=opacityvalue;
$('#image').filters.alpha.opacity=opacityvalue*100;

Я буду честен, я не проверял это, поэтому, возможно, есть некоторые ошибки, но концепция есть.

Ссылка CSS: http://www.w3schools.com/css/css_image_transparency.asp

Изменить CSS с помощью jQuery: http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

Answer 3

Я бы сделал это с двумя изображениями (это может быть одно и то же изображение, загруженное дважды) Одно поверх другого.

http://jsfiddle.net/MPFyt/

Это не совсем верно, ноВы можете использовать его в качестве отправной точки.

Answer 4

Лучший способ - использовать два изображения.Как на одной и той же позиции, так и на заднем и переднем плане, и делайте обрезку переднего плана в соответствии с процентами.