金的博客 | Jxx Blog

Amuse Yourself

Posted by Jxx on November 22, 2019

浏览器适配总结

前言由于IE8还有很大一部分用户，而IE8对HTML5和CSS3的支持并不理想。因此想让网站浏览者正常浏览网页，一般会有两种处理方法：通过navigator.userAgent判断浏览器版本从而显示不同的网页使用Javascript来使不支持HTML5的浏览器支持HTML标签。下面就来总结一下：一、根据浏览器版本显示不同网页 var DEFAULT_VERSION...

Posted by Jxx on August 25, 2019

display: grid;网格布局

一、前言网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。 CSS网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。二、网格容器给<div>这类块级元素设置 display：grid 或给<span>这类内联元素设置 display：inline-grid 来创建一个网格容器。一旦我们...

Posted by Jxx on April 1, 2019

display: flex;伸缩盒布局

一、Flex布局是什么？ Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex，flex布局即创建！其中，直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为f...

Posted by Jxx on March 29, 2019

css使元素粘住浏览器底部

前言本文主要介绍使用css使元素粘住浏览器底部，无论内容区域多或者少，footer元素始终停靠在浏览器底部。盗图一张，嘻嘻一、全局容器增加一个等于底部高度的负值下边距建一个全局容器包含除了底部之外的所有内容，设置它的下边距 = - 底部高度 HTML代码： <body> <div class="wrapper"> content ...

Posted by Jxx on March 23, 2019

[].slice.call()方法

javascript methods

前言：前些天看到link rel=alternate网站换肤功能最佳实现里面有用到[].slice.call()方法，于是去查了下先摆上结论：[].slice.call(arguments)能将具有length属性的对象转成数组。 1、基础知识 1.1 slice()方法定义和用法 slice(start, end) 方法可提取数组的某个部分，并以新的数组返回被提取的部分(浅...

Posted by Jxx on March 14, 2019

网站换肤

link rel=alternate网站换肤功能最佳实现

一、大多数开发人员的实现大多数前端开发人员实现网站皮肤更换功能大致下面两种方法：一个全局class控制样式切换；改变皮肤link元素的href地址。例如： <link id="skinLink" href="skin-default.css" rel="stylesheet" type="text/css"> 换皮肤的时候JS改变href属性值： sk...

Posted by Jxx on March 14, 2019

搞懂SVG/Canvas中nonzero和evenodd填充规则

一、填充有两种规则只要是路径填充，都有两种规则，nonzero和evenodd，无论是SVG中的路径填充，还是Canvas中的路径填充，如果还有其他和路径相关的技术（甚至设计软件），也离不开这两种填充规则。换句话说，这是超越各种语言，普世通用的技能点。下面，看看我能不能用足够精简的语言，尽可能让大家都搞懂这两种路径填充规则。如果我们用3个点，连成一个三角形，则这两种填充规则没...

Posted by Jxx on December 2, 2018

Plugin Demo

Record plug-ins usage

轮播图(淡入淡出)demo 轮播图(无缝轮播)demo 弹出提示弹框demo placeholder属性适配低版浏览器demo 仿百度日历demo laydate日历控件demo 分页demo 兼容IE8的jQuery滚动公告/新闻行情/信息地雷Banner插件jquery.newsticker.jsdemo 图片点击放大功能（photoswipe的使用）demo 休眠时间...

Posted by Jxx on November 21, 2018

Record some javascript methods

通过ajax获取页面中指定容器内的代码块 //方法一 success: function(result) { var Obj = $("<code></code>").append(result); var $html = $(".page-wrapper", Obj); var value = ...

Posted by Jxx on October 29, 2018

Jxx Blog