欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

像纸质笔记本一样给div,textarea添加行的分割线

程序员文章站 2022-05-04 13:28:20
想要给textarea添加一个背景图来实现 但是背景图有几个问题, 1、每个div或者textarea的line-height不一样,对于每个不同的line-height都需要一个不同的背景图 2、当有滚动条出现时,拉动滚动条背景图分割线不会变,导致样式错位 因此使用传统的图片作为背景图不可行,因为 ......

想要给textarea添加一个背景图来实现

但是背景图有几个问题,

1、每个div或者textarea的line-height不一样,对于每个不同的line-height都需要一个不同的背景图

2、当有滚动条出现时,拉动滚动条背景图分割线不会变,导致样式错位

因此使用传统的图片作为背景图不可行,因为line-height是变化的,并且有滚动条的时候背景图也应该变化。

问题找到了,就要找到解决问题的访问,那就是使用canvas动态生成背景图。

具体不用讲解了,看代码,做成了一个jquery插件的形式。

直接调用$("textarea,div").backgroundline();就行

截个图:

像纸质笔记本一样给div,textarea添加行的分割线

 

(function ($) { 
    var  setbg=function(_this) {
        if ($(_this).css("visibility") == "hidden" || $(_this).css("display") == "none" )
            return;
        var lineheight = parsefloat($(_this).css("line-height"));
        if (isnan(lineheight)) {
            lineheight = 25;
            $(_this).css("line-height", lineheight + "px");
        }
        var padding = $(_this).scrolltop() % lineheight;
        var bgimg = createbg(lineheight, padding);
        if (bgimg != null) {
            $(_this).css("background", "url(" + bgimg + ")   repeat");
            $(_this).on("scroll", function () {
                var lineheight = parsefloat($(_this).css("line-height"));
                var padding = $(_this).scrolltop() % lineheight;
                var bgimg = createbg(lineheight, padding);
                $(_this).css("background", "url(" + bgimg + ") left top repeat");
            });
        }
    } 
    this.___bglist = {};
    var createbg=function( height, padding) {
        var key = height + "-" + padding; 
        var width = 4;
        if (this.___bglist[key] != null) {
            return this.___bglist[key];
        }
        var canvas = document.createelement("canvas");
        if (canvas.getcontext) {
            var context = canvas.getcontext("2d");
            canvas.width = width;
            canvas.height = height;
            canvas.linewidth = 1;
            canvas.fillstyle = "#000000";
            context.fillrect(0, height - padding - 1, 1, 1);
            var dataurl = canvas.todataurl('image/png'); 
            this.___bglist[key] = dataurl;
            return dataurl;
        }
        return null;
    }
    $.fn.backgroundline = function (options) {
        this.each(function () { 
            setbg(this);
        });
    };
})(jquery);