惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Visual Studio Blog
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
罗磊的独立博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 【当耐特】
T
Tailwind CSS Blog
美团技术团队
Y
Y Combinator Blog
I
InfoQ
C
Check Point Blog
Microsoft Security Blog
Microsoft Security Blog
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
博客园 - Franky
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
G
GRAHAM CLULEY
爱范儿
爱范儿
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Google DeepMind News
Google DeepMind News
F
Fortinet All Blogs
A
Arctic Wolf
Hugging Face - Blog
Hugging Face - Blog
S
Security Affairs
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
小众软件
小众软件
云风的 BLOG
云风的 BLOG
酷 壳 – CoolShell
酷 壳 – CoolShell
Recent Announcements
Recent Announcements
H
Heimdal Security Blog
博客园 - 司徒正美
Latest news
Latest news
H
Hacker News: Front Page
H
Help Net Security
Know Your Adversary
Know Your Adversary
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
Secure Thoughts
AWS News Blog
AWS News Blog
V
Vulnerabilities – Threatpost
NISL@THU
NISL@THU
C
Cyber Attacks, Cyber Crime and Cyber Security
L
LangChain Blog
The GitHub Blog
The GitHub Blog
有赞技术团队
有赞技术团队
The Cloudflare Blog
I
Intezer
N
News and Events Feed by Topic

博客园 - chegan

历时半年,我将一个大型asp.net的零代码快速开发平台转成了java 用c#从头写一个AI agent,实现企业内部自然语言数据统计分析(三)--一个综合的例子 用c#从头写一个AI agent,实现企业内部自然语言数据统计分析(二)-数据结构和代码分析方法 用c#从头写一个AI agent,实现企业内部自然语言数据统计分析 基于视图的增删改查操作(颠覆传统思维吧) 恶劣的百度推广人员 javascript实现当前页面截屏 基于数据库的企业级智能表单系统设计(asp.net)-架构 基于数据库的企业级智能表单系统设计(asp.net)-序言 同时运行qq和360的方法(偶然发现的) http编程中的get和post混合使用方式 使用silverlight构建一个工作流设计器(二十一)-增加标签(下) 使用silverlight构建一个工作流设计器(二十)-增加标签(上) 自贺获得DEV-WOW 2009微软开发者大赛开发奖 使用silverlight构建一个工作流设计器(十九)-规则与活动的交点的平滑移动 使用silverlight构建一个工作流设计器(十八)-持久化数据到数据库—服务器段功能实现 使用silverlight构建一个工作流设计器(十七)-持久化数据到数据库—设计webservices接口 使用silverlight构建一个工作流设计器(十六)-持久化数据到数据库—数据库结构 抛论妄自菲薄与夜郎自大之砖,引国家软件发展道路之玉
像纸质笔记本一样给div,textarea添加行的分割线
chegan · 2019-01-03 · via 博客园 - chegan

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

但是背景图有几个问题,

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

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

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

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

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

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

截个图:

(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);