S小菲-CSDN博客

原创回流和重绘

回流（reflow）当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流。每个页面至少需要回流一次，就是在页面第一次加载的时候。重绘（repaint）当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局，这称为重绘。回流必将引起重绘，重绘不一定引起回流。任何对render tree中元素的操作都会引起回流或重绘。1、添加、删除元素（回流+重绘）2、隐藏元素。display（回流+重绘）

2020-09-16 14:07:43 149 1

原创 vue的生命周期

所有的生命周期钩子自动绑定this上下文到实例中，因此可以访问数据，对property和方法进行运算。这也意味着不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文。beforeCreate 在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。created 在实例创建完成后被立即调用。在这一步，实例已完成一下的配置：数据观测（data observer），property和方法的运算，watch/event事件回调。然.

2020-09-16 11:49:51 108

原创 vue 分页组件

<template> <div class="page-number"> <button @click="change('prev')" :class="{'button-disabled':leftDisabled}">上一页</button> <template v-if="totalPage<6"> <button v-for="item in totalPage" .

2020-08-25 12:04:10 127

原创 jQuery分页插件（兼容IE8+）

JS部分;(function($) { function Page(ele, options) { var defaults = { page: 1, totalPage: 1, callback: function() {} } this.$element = $(ele); this.settings = $.extend({}, defaults, options); this.init(); } Page.prototype = { init:.

2020-08-25 10:55:25 595 1

原创 vue轮播组件（兼容IE10+）

组件内容<template> <div class="bannerBox" :style="imgStyle" @mouseover="stopAuto" @mouseout="autoPlayFunc"> <div class="bannerList" :style="bannerListStyle"> <img :src="imgList[imgList.length-1]" :style="imgStyle" /> .

2020-08-20 14:11:42 356

原创 CSS文本超出宽度显示省略号，点击“展开全部“则显示全部（兼容IE8）

<div id="box"> <p class="text">滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置</p> <span class="more">显示更多</span></div> #box{ width: 200px; height: 35px; overflow: hidden; position: relative; }..

2020-07-24 17:31:48 1181

原创数组去重

// indexOf/** 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中* IE8以下不支持数组的indexOf方法* */function unique(ary) { let newAry = []; for (let i = 0; i<ary.length; i++) { if (newAry.indexOf(ary[i]) === ...

2019-11-04 14:25:31 98

原创 CSS实现水平垂直居中

/* CSS代码 */.wp { width: 300px; height: 300px; border: 1px solid red; } .box { background: green; }.size{ width: 100px; height: 100px; }一、居中元素宽高固定<!-- HTML代...

2019-11-04 14:11:47 118

原创 JS实现回到顶部功能

<div></div><span class="toTop">回到顶部</span>div{ height：3000px;}.toTop{ display:none; position:fixed; right:0; bottom:20px;}window.onload=fu...

2019-03-15 09:36:36 638

原创 jquery简单实现鼠标滑过导航栏切换内容

代码：<!DOCTYPE HTML><html><head><title></title><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script

2018-03-06 10:32:53 5535 5

F_family的博客