如何隐藏某些边框之外的javascript动画?
我是 javascript/jquery 领域的新手,但对于我的网页效果有一个奇妙的想法。让我解释一下布局。
我的网站包含在一个包装 div 中,这可确保我的内容保持在 1000 像素并位于屏幕中央,无论显示器的宽度如何(假设显示器大于 1000 像素)。此内容包含当前用于显示彩色图像 (1000x400px) 的标题图像,其中显示网站/公司/等的标题。所以这个图像就是内容容器的宽度。
我认为不将公司名称设置在图像上,而是让它在图像上从左到右、从右到左滚动会很酷。这可以使用 jquery 和 animate() 函数(或接近它的函数)来完成。问题是,一旦网站标题滚动到网页的一个极端,它将溢出 1000x400px 图像并超出内容容器 - 从而进入包装器区域,该区域只是一个灰色背景。
我的问题是,我无法概念化一种将滚动文本(将由非常高的 z 索引表示)隐藏在背景包装器(这是一个简单的背景,因此索引可能最低)后面的方法。我只希望超过 1000 像素宽的内容容器的滚动文本部分可见。有人知道如何隐藏包装背景上的内容吗?我想到也许可以用一些由内容容器的存在分隔的 div 来重新创建包装器背景;这个 div 将具有尽可能高的 z-index,因此它会隐藏它叠加的任何内容。有没有更好/更简单的方法来实现这个?
如果我没有意义,请告诉我:)
帕特
I'm new to the wold of javascript/jquery, but had this fantastic idea for an effect for my webpage. Let me explain the layout abit.
My website is contained within a wrapper div, which assures that my content remains at 1000px and centered on the screen regardless of the width of monitor (assuming the monitor is bigger than 1000px). This content contains a header image that is presently used to display a colourful image (1000x400px) displaying the title of the website/company/etc. So this image is the width of the content container.
I thought it would be cool to instead of having the name of the company set on the image, have it scroll left to right, right to left on the image. This can be done with jquery and the animate() function (or a function close to it). The problem is that once the website title has scrolled to one extreme of the webpage, it will overflow out of the 1000x400px image and outside of the content container - thus into the wrapper region, which is simply a grey background.
My problem is that I can't conceptualize a way to hide the scrolling text (which would be represented by a very high z-index) behind the background wrapper (which is a simple background, so the lowest index possible). I only want the section of the scrolling text that is over the 1000px-wide content container to be visible. Anyone would know how to hide what is over the wrapper background? I thought of maybe recreating the wrapper background with some divs delimited by the presence of the content container; this div would have the highest z-index possible so it would hide anything that it superimposes. Is there a better/easier way to implement this?
Let me know if I'm not making sense :)
Pat
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
也许我在这里遗漏了一些东西,但是;
如果滚动文本是wrapper div的子,那么需要做的就是将样式overflow:hidden;应用到包装 div。
Maybe I'm missing something here, but;
If the scrolling text is a child of the wrapper div, then all that needs to be done is to apply the style overflow:hidden; to the wrapper div.