隐藏绝对定位的div溢出会破坏Javascript [英] Hiding overflow of absolutely positioned div disrupts Javascript
问题描述
我在解决方案方面获得了一些帮助,使该箭头"在单击时与上方对象的中间对齐...正在起作用.
I got some help with a solution to make this "arrow" align with the middle of the objects above it on click...it was working.
从那时起,我在设计上做了更多工作,需要将"wrap" div的溢出设置为position:relative以隐藏箭头的x轴溢出...有效,但是:
Since then, I have done some more work on the design and needed to set the overflow of the "wrap" div to position:relative in order to hide x-axis overflow of the arrow...that works, but:
现在对齐已结束.我不知道为什么原因,因为我对jQuery不好:(
Now the alignment has gone off. I can't figure out why as I am no good with jQuery :(
一个重要的注意事项:该网站具有响应能力,并且现在调整浏览器的宽度正在使箭头位置发疯(仅因为我已将自动换行设置为position:relative).
One important note: this site is responsive, and adjusting the browser width is now doing crazy stuff to the arrow position (only since I've changed the wrap to position:relative).
在此处查看代码: http://jsfiddle.net/RevConcept/y86RG/5/
感谢您的帮助!
HTML:
<div class="container">
<div class="row">
<ol class="flexslider-nav">
<li class="threecol">
<img id="discover" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
</li>
<li class="threecol">
<img id="design" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
</li>
<li class="threecol">
<img id="develop" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
</li>
<li class="threecol last">
<img id="deploy" class="btn-workflow" src="http://nillabean.com/images/circle-225.png" alt="#" />
</li>
</ol>
</div><!--end row-->
<!-- WORKFLOW: DESC. SLIDER -->
<div class="row">
<div class="twelvecol last">
<div class="arrow-wrap">
<div class="arrow"></div>
</div><!--end arrow-wrap -->
<div class="flexslider">
<ul class="slides">
<li>
<p>Test Content</p>
</li>
<li>
<p>Test Content</p>
</li>
<li>
<p>Test Content</p>
</li>
<li>
<p>Test Content</p>
</li>
</ul>
</div><!--end flexslider-->
</div><!--end col-->
</div><!--end row-->
CSS:
.container p {
color: #fff;
line-height: 100px;
background: #000;
text-align: center;
margin: 20px 0 0 0;
}
.flexslider p {
margin-top:0px;
background:transparent;
color:#000000;
}
.flexslider {
border-bottom:1px #000 solid;
border-left:1px #000 solid;
border-right:1px #000 solid;
}
h1, h2, h3 {
text-align:center;
}
.flexslider-nav li img {
display:block;
margin:0px auto;
}
.arrow {
position:absolute;
background:transparent url(http://nillabean.com/images/arrow.png) repeat-x bottom center;
width:2200px;
height:40px;
}
.arrow-wrap {
position:relative;
height:35px;
border:1px #C00 solid;
}
JQUERY:
var start_pos = $("#discover").offset().left + $("#discover").width()/2 - $(".arrow").width()/2;
$(".arrow").css("left", start_pos);
$(".btn-workflow").click(function(event){
var x = $(this).offset().left;
var img_width = $(this).width();
var arrow_width = $(".arrow").width();
var arrow_x = x + img_width/2 - arrow_width/2;
$(".arrow").animate({
"left": arrow_x
}, "slow");
});
图像:
这最终是我要尝试的工作...边框和透明度使此操作变得比仅添加简单箭头还要困难.
This is ultimately what I'm trying to do...the border and transparency are making this more difficult than just adding s simple arrow.
推荐答案
http://jsfiddle.net/y86RG/13/ 那行得通吗?这就是我所做的改变
http://jsfiddle.net/y86RG/13/ Will that work? Here's what I have changed
.arrow {
position:absolute;
background:transparent url(http://nillabean.com/images/arrow.png) repeat-x bottom center;
left: 0;
top: 0;
right: 0;
height:35px;
}
.arrow-wrap {
position:relative;
height:35px;
border:1px #C00 solid;
}
然后在JS中,删除以下行
And in the JS, removed the following line
// $(".arrow").css("left", start_pos);
这篇关于隐藏绝对定位的div溢出会破坏Javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!