分类 HTML 的文章 累计 14 条

dhso dhso 统计中 2018-06-15 14:05

CSS实现按钮点击水波纹效果

html

<button class="btn btn-default btn-lg ripple">Button Ripple</button>

<button class="btn btn-default btn-lg boom">Button Boom</button>

css

.ripple {
    position: relative;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, tran
[ 阅读更多 ]
dhso dhso 统计中 2018-06-14 14:58

js实现html转成pdf代码

引入依赖

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

html2pdf方法

html2pdf(fileName) {
        fileName = typeof (fileName) == 'string' ? fileName : `pdf_${new Date().getTime()}`;
        html2canvas(document.body).then(function (canvas) {
            let contentWidth = canvas.width,
                contentHeight = canvas.height,
                //一页pdf显示html页面生成的canvas高度;
                pageHeight = contentWidth / 592.28 * 841.89,
                //未生成pdf的html页面高度
                leftHeig
[ 阅读更多 ]
dhso dhso 统计中 2018-05-03 01:10

鼠标高亮div边框并读取xpath

插入style节点方法

function addCssByStyle(cssString) {
    var doc = document;
    var style = doc.createElement("style");
    style.setAttribute("type", "text/css");

    if (style.styleSheet) { // IE
        style.styleSheet.cssText = cssString;
    } else { // w3c
        var cssText = doc.createTextNode(cssString);
        style.appendChild(cssText);
    }

    var heads = doc.getElementsByTagName("head");
    if (heads.length)
        heads[0].appendChild(style);
    el
[ 阅读更多 ]
dhso dhso 统计中 2017-02-14 15:59

嵌入页面js插件式写法

LazyLoad = (function(doc) {

    var env,

        head,

        pending = {},

        pollCount = 0,

        queue = {
            css: [],
            js: []
        },

        styleSheets = doc.styleSheets;

    function createNode(name, attrs) {
        var node = doc.createElement(name),
            attr;

        for (attr in attrs) {
            if (attrs.hasOwnProperty(attr)) {
                node.setAttribute(attr, attrs[attr]);
            }
        }

        return node;
    }

    function
[ 阅读更多 ]
dhso dhso 统计中 2017-01-05 12:03

js对URL处理方法

封装代码

var urlKit = {
        domain : function(_url){
            return _url?urlKit.pure(_url).replace(/https|http|ftp|rtsp|mms|:|\//g,''):document.domain;
        },
        hostname : function(){
            return location.hostname;
        },
        pathname : function(){
            return location.pathname;
        },
        port : function(){
            return location.port;
        },
        protocol : function(){
            return location.protocol;
        },
        pure : function(_url){
[ 阅读更多 ]
博客介绍
写好程序在于点滴积累,多做笔记!
热评文章
最新评论