javascript - 围绕非矩形形状流动和滚动文本

标签 javascript jquery css scroll word-wrap

我创建了一些代码,可以让文本围绕某些形状流动。使用简单的 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');
    });

(想法来自http://www.csstextwrap.com)

最佳答案

我不知道是否有办法通过 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/

相关文章:

javascript - 获取音频文件并将其加载到表单附件中

javascript - 为什么垂直滚动条总是可见

javascript - 从sqlite数据库读取信息,语法?如何在 html5 webapp 中使用它?

javascript - 单击列表项后显示子列表

javascript - Jquery 附加按钮显示不正确

javascript - 在 SVG 中以特定 Angular 放置路径

css - 将 ReactCSSTransitionGroup 与样式组件一起使用

javascript - 为什么这个 JSON 文件读起来很奇怪

javascript - 在 JS 中声明函数 : Named and Unamed expression

javascript - 使用 angular 和 ng-repeat 从 Ajax JSON 加载表