我正在编写一个应用程序,我绘制了几个图像,如下所示:
void TimeSlice::draw(float fX, float fY) {
list<TimeSliceLevel*>::iterator it = levels.begin();
float level_x = x;
float level_y = y;
while(it != levels.end()) {
(*it)->draw(level_x,level_y);
level_y += (*it)->height;
++it;
}
}
虽然这有点不正确.我需要将TimeSliceLevel*放在X上.当我有一个for(int i = 0; i < slices.size(); ++i)循环时,我可以使用x = i * width.虽然我正在使用迭代器,因为我多次被告知这是一个很好的编程:>我想知道迭代器是否有一个"索引"数字可以用来计算新的X位置？(所以这是一个关于使用迭代器的问题)
亲切的问候,Pollux
我想要将用户单击的图像动画化到左上角 100x100，然后我希望它返回到动画开始的原始位置，但是使用这段代码，它会不断向顶部和左侧滑动一些像素。我无法弄清楚是什么原因导致了这个问题。怎样才能让它回到原来的位置呢？
var posLeft;
var posTop;
$(this).children("img").click(function() {
goToTopLeft($(this));
$.each($(this).parent().children("img"), function() {
$(this).css("z-index","0");
});
goToFrontFromTopLeft($(this));
$(this).css("z-index", "1");
});
function goToTopLeft(img) {
posLeft = img.position().left;
posTop = img.position().top;
img.animate({ top: '-=100', left: '-=100', height: 'toggle' }, 500);
}
function goToFrontFromTopLeft(img) {
img.animate({ top: posTop, left: posLeft, height: 'toggle' }, 500);
}
我在这方面有点新鲜.我在aktrailhead.com的页面中实现了叠加层.例如,请查看http://aktrailhead.com/baldy/baldy.shtml
问题是,即使向上或向下滚动,叠加始终保持在浏览器窗口中的相同位置.页面的其余部分相应地向上或向下移动,而叠加层从不移动.
这在小屏幕(例如平板电脑)上是一个问题,因为覆盖层的底部部分(由小屏幕切断)仍然无法触及.
要进行测试,请在上面的链接中打开叠加层.然后,调整浏览器窗口的大小,以便窗口底部关闭页面 - 因此需要滚动.在这种情况下,你会注意到叠加层的下半部分是如何无法访问的,而页面的其余部分则滚动(就像它应该的那样).
也许这是相对于浏览器空间的叠加定位问题,而不是页面本身？我想如果它相对于身体元素定位,它会相应地向上或向下移动.我不知道,但我希望这是一个简单的解决方案.我试过用CSS修复它,但到目前为止还没有运气.
当一个元素移出它的容器时，我想隐藏它。但我有 1 个限制：我不能overflow: hidden;在我的容器中用作永久样式。
这是我需要的链接：
我想知道是否有办法完成它，例如在它出去时消失？...可能overflow: hidden在完成动画时给出临时信息。
我有一个我正在开发的响应式网站，当宽度低于 800 像素时，菜单会固定在顶部，并带有一个切换下拉菜单。
发生的事情是 div 延伸到 HTML 和 Body 区域之外，并添加了一个横向滚动条。我不知道如何解决这个问题。
任何帮助将不胜感激！
这是我的代码
HTML：
<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
<li><a class="location" href="#">Location</a></li>
<li><a class="building" href="#">Building</a></li>
<li><a class="space" href="#">Space</a></li>
<li><a class="links" href="#">Links</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
CSS：
.navMobile {display:block;}
.navMobile {
height:auto;
}
.navMobile .menuBox {
height:auto;
min-height:40px;
width:100%;
display:inline-block;
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:99999;
}
.navMobile .menuBox ul {
display:block;
clear:both;
height:auto;
width:100%;
padding:0;
margin:0;
border-top:1px solid #eee;
font-family: "proxima-nova"; …我有一个主要的div有100%的宽度,并有2个div.一个有200px宽度,其他将是100%-200px,我的意思是;
-----------------this is main div -------------
| |
| ----subdiv1---- -------------subdiv2----------|
|| | | ||
| -------------- ---------------------------- |
|-----------------------------------------------|
subdiv1有200 px,subdiv2的宽度将是其余的空白空间.我搜索谷歌但无法找到.
与此问题相关.
这是一个小提琴:http://jsfiddle.net/DRbRS/
注意红色轮廓列表div如何不在绿色容器div的底部对齐.
问题在于,即使标题的高度已知,也无法提前知道列表的最终高度应该是多少.
有没有办法解决这个问题而不诉诸javascript？
我们需要的是一种风格 height: fill;
我想使用CSS将背景图像的顶部与元素的底部对齐(这样我就可以transition在悬停或动画中进行渲染,以防您想知道).此元素没有设定高度; 我不知道元素的高度是多少.有人知道怎么做这个吗？解决方案不必与IE兼容; 它只需要在最新版本的Chrome和Firefox中使用.
编辑:<body>如果在赏金结束时有这样的答案,我会将赏金奖励给也适用于该元素的答案.
所以我在这个网站上工作,我展示了我的想法.在一个较低的页面横幅上工作后,突然间一切都消失了,而我留下的只是身体中的背景图像.
你能弄明白为什么topImage id不显示吗？看到它工作一秒而不是另一个是令人沮丧的:
<style>
body
{
background-image:url("images/Background.gif");
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center top;
}
#topImage
{
position:absolute;
background-image:url("images/Top-Banner.gif");
background-repeat:repeat-x;
width:100%;
top:0px;
left:0px;
}
</style>
<body>
<div id="topImage"></div>
</body>
对不起,如果这是一个非常基本的问题,我对此有点新意.
是否可以调整absolute远离中心而不是左侧或右侧的图像的位置？
因为如果我使用:
#marker {
position:absolute;
z-index:999;
right:250px;
top:400px;
}
它在我的显示器上看起来很好,但在较小的笔记本电脑分辨率上查看它时会看起 我需要的是将图像从中心推开,这样即使在不同的屏幕尺寸上它也会处于相同的位置.
对不起,如果我没有多大意义
positioning ×10
css ×7
html ×3
jquery ×3
background ×1
c++ ×1
counter ×1
fixed ×1
image ×1
iterator ×1
jquery-tools ×1
overlay ×1
scroll ×1