0

OK, I'm in a real pickle here friends, and I need some help.

I have a website I am working on for a client of our company, but at the top of the page it involves a jQuery slideshow/infinite carousel mix that shows the CURRENT image in-between a 19-ish pixel white border on both sides and the other pieces of the carousel are supposed to be hidden under and behind a blue overlay.

When the client clicks the previous/next arrow (currently base text links that I'm going to re-position after I get this POS taken care of), the current image that is shown in the middle of the carousel on the page is supposed to slide to the left UNDER the white border and INTO the blue overlay (kind of like a transparent film effect, if you will).

Well, I'm STUMPED as to how I can get the image to slide under the border and overlay a color on top of it, ALL DYNAMICALLY without fading the entire image at once while moving to the left. It's supposed to be a super-smooth transition.

This is ULTIMATELY what it's SUPPOSED to look like:

http://www.powellcreative.com/clients/StansellHealth/images/help.png

This is what it looks like right now:

http://www.powellcreative.com/clients/StansellHealth/

Mind the crudeness of the current look and feel, it's still in the base development stages from the PSD, but this stumps me. Please help

4

1 回答 1

0

我创建了一个非常快速但不起作用的示例来向您展示可以使用的技术：

http://jsfiddle.net/gdgKQ/1/

基本上，您想使用两个绝对定位、部分透明的 div 在您正在使用的合成中创建电影效果。如果我有时间并且它很有用，我可以添加一些 JavaScript 来向您展示实际效果。

于 2012-08-28T19:26:39.617 回答