- 博客(10)
- 收藏
- 关注
原创 回流和重绘
回流(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 1185
原创 数组去重
// 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人