我创建了一些代码,可以让文本围绕某些形状流动。使用简单的 Javsscript: 参见 http://jsfiddle.net/lobin/YPBmJ/2/
我试图实现的是形状是固定的,当滚动时,文本将围绕形状滚动。我通过绑定(bind)到滚动事件的 JS 让形状保持固定,但它接缝渲染不会适应新情况(参见 jsfiddle)。
有什么想法吗?
HTML:
<div class="box"><div class="shapewrapper"></div>Some long Text</div>
CSS:
.box {
width:600px;
height:400px;
position: absolute;
overflow-y: scroll;
}
.box .shapewrapper {
position: relative;
}
.box .shapewrapper .left {
background-color: #f00;
height:1px;
float:left;
clear:left;
}
JS:
var hbratio=10;
var h=$(".box").height();
for (i=h;i>0;i--) {
b=Math.round(i/10);
$(".shapewrapper").prepend('<div class="left" style="width:'+b+'px;" />');
}
$(".box").scroll(function() {
var y=$(".box").scrollTop();
$(".shapewrapper").css("top",eval(y)+'px');
});
最佳答案
我不知道是否有办法通过 css(单独)实现这一点,但我想出了一个涉及 jQuery 的解决方案。
每当用户滚动“.box”元素时,第一个“.left”元素的上边距应该被调整。
$(".box").scroll(function() {
$(".box .left").first().css("margin-top", $(this).scrollTop()+"px");
});
为了让它工作,用户必须实际滚动框元素,所以我将框的 CSS 更改为 overflow:auto。它也适用于用户滚动父元素,但随后需要将滚动事件的选择器更改为父元素。
我创建了一个新的 jsFiddle 来演示它:http://jsfiddle.net/EwQ5J/1/
关于javascript - 围绕非矩形形状流动和滚动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24593727/