- 博客(27)
- 收藏
- 关注
RSS订阅原创 h5实现绘制不同尺寸大小的背景图，上面的文字头像二维码等比例缩放
头像、文字、二维码的位置都是相对于背景图的比例位置，不管背景图的尺寸多少，所有元素都会保持相对位置和比例。createPattern() 方法在指定的方向内重复指定的元素，元素可以是图片、视频，或者其他 元素。根据不同大小的图片，绘制的海报上面文字，二维码同比例位置和大小，也就是说不管背景图大小是多少，上面的文字和头像及二维码都需要保持统一位置和大小。上面二维码的图片大小计算：保证二维码不会太小或者太大，与背景图成比例，确保二维码在各种尺寸的背景图上都能保持合适的大小。
2024-11-07 14:54:05
35
原创 wangeditor编辑器自定义按钮和节点,上传word转换html，文本替换
2、editorComponents.vue代码，在editor组件中引入index.ts和renderviedoEle/index和renderimgEle/index。4.自定义节点的部分renderviedoEle/index，renderimgEle/index 放在了github。安装：npm install @wangeditor/editor --save。需求：在编辑器插入图片和视频时下方会有一个输入框填写描述，上传word功能。1、自定义按钮部分 index.ts，参考了文档。
2024-08-22 10:42:38
565
原创 同步任务和异步任务
异步任务执行完成后，会通知javascript主线程执行异步任务的回调函数。每一个宏任务执行完，检查是否有待执行的微任务，如果有微任务，就先执行完所有的微任务之后，再执行下一个宏任务(注：宏任务和微任务是交替执行的)同步任务，又称非耗时任务，在主线程上排队执行的任务；javascript主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行；宏任务——>执行结束——>有微任务——>执行所有的微任务——>执行下一个宏任务。宏任务——>执行结束——>无微任务——>执行下一个宏任务。
2022-10-08 15:08:38
535
原创 Selectize.js插件的使用
Selectize是一个可扩展的基于jQuery 的自定义下拉框的UI控件.可以是带搜索的单选下拉框，也可是是带搜索的多选下拉框。初始化Selectize控件var $select = $('#selpower').selectize({maxItems: 1});var control = $select[0].selectize;$("#selpower").selectize...
2019-08-29 16:33:26
615
原创 快速入门template.js
template.js是javascript模板引擎，很多时候在ajax请求数据渲染页面，个人感觉用了这个非常方便首先得引入template.js<div id="box"></div><script src="template.js"></script>定义一个模板<script type="template&
2019-01-05 18:24:00
11397
1
原创 vue中axios跨域请求解决
一，首先在文件中下载axioscnpm install axios --save-dev二、在main.js中引入及获取对象import Vue from 'vue'import App from './App'import router from './router'import Axios from 'axios'Vue.prototype.$axios = Axios...
2018-10-23 17:03:19
9468
原创 CSS水平垂直居中方法总结
一、已经元素宽高（1）定位布局<div class="box"> <div class="contain"></div></div>.box{ width:200px; height: 200px; background: red; margin: 0 auto; position: relative; }.c...
2018-09-13 10:35:19
185
原创 前端框架
一、Animate.css跨浏览器的CSS3动画库，使用方便二、H-ui前端框架H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好http://www.h-ui.net/index.shtml三、Mint UI基于vue的移动端UI框架http://mint-ui.git...
2018-08-31 15:42:26
272
原创 百度mip自定义js封装步骤
什么是百度mip？MIP（Mobile Instant Pages - 移动网页加速器）主要用于移动端页面加速官网参考：https://www.mipengine.org/doc/00-mip-101.html百度mip不允许自己定义js，所以需要封装再去引用，具体步骤如下：一、安装及环境部署具体安装步骤可参考：http://www.cnblogs.com/mipengine/...
2018-08-10 16:55:08
10106
原创 input常见样式问题
一、清除ios系统默认的样式及圆角（在移动端手机测试上会有圆角）input，button{-webkit-appearance: none;border-radius: 0;} 如果还没效果在后面加上！important二、更改input的placeholder属性input::-webkit-input-placeholder, textarea::-webkit-input-...
2018-07-18 18:05:35
789
原创 关于闭包
闭包的作用：1、可以读取函数内部的变量，即内部函数可访问外部函数的变量2、让变量的值始终保持在内存中function fn1(){ var a = 7; return function(){ console.log(a) } } fn1()(); // 打出7闭包场景1:封闭作用域;(function(){//防止上一个闭包没有;号 var...
2018-07-13 17:39:18
168
原创 自定义横向滚动条模拟
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;list-style:
2018-07-12 16:49:07
1729
原创 jquery中width()，innerWidth()，outerWidth()，outerWidth(true)和的区别
width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。同理...
2018-07-05 14:05:26
120
原创 放大镜实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;border: none
2018-06-28 17:46:38
79
原创 offset系列，client系列及scroll系列
offset系列一、offsetWidth和offsetHeight获取对象的宽度和高度，包括内容，边框和内边距。即offsetWidth = width+border+padding注：与div.style.width区别，它只是获取到行内的数值，返回的是字符串，如：100px二、offsetLeft和offsetTop距离第一个有定位的父级盒子左边和上边的距离。注：父级如果都没有定位，就以bo...
2018-06-26 16:55:51
328
原创 小程序生成二维码分享朋友圈的功能
1、如何小程序分享页面的二维码？通过后台接口可以获取小程序任意页面的二维码，具体可以参考https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html可以选择你所需要的小程序码，给到后台相应的参数生成即可。这里说一下B接口的参数scene，关于scene参数，小程序的解释如下：注意：通过该接口生成的小程序码，永久有效，数量暂无限制。...
2018-06-21 15:43:04
43700
1
原创 js延时加载实现
实现原理：将img标签里的src属性设为同一张空白图片（封面图片），再自定义一个属性，属性值为图片的真实路径，通过js监听图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。其中用了淡入淡出增加了效果。下面是一个简单的样式布局 *{padding: 0;margin: 0;} ul{width:828px;margin: 50px auto;} li{list-style: ...
2018-06-20 16:37:33
2119
转载 前端浏览器兼容问题
兼容页面的方法：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。问题一：不同浏览器的标签默认的外补丁和内...
2018-06-19 16:33:34
312
原创 文字溢出换行（单行或多行）
单行文本换行css需设置属性：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;多行文本换行css需设置属性：（-webkit内核才有效）overflow : hidden;display: -webkit-box;-webkit-line-clamp:3;-webkit-box-orient: vertical;-...
2018-06-19 13:51:45
13598
2
原创 关于前端页面优化的方法
前端页面优化方法1、减少http请求，减少DNS查询次数，减少dom操作2、CSS写在顶部，JavaScript写在尾部或异步3、压缩HTML、CSS、JavaScript4、js不滥用闭包，会加深作用于链5、css选择器要合理应用6、使用雪碧图或者css Sprites整合图片7、避免CSS表达式，<link>代替@important8、延时加载图片9、使用图标，列如阿里巴巴图标库1...
2018-06-15 16:53:08
2773
原创 瀑布流特效演示
<div id="wrap"> <ul> <li> <!--<div class="detail"> <a href="#"><img src="imgs/1.jpg"/></a>
2018-06-14 15:26:42
593
原创 jquery实现点击左右按钮的切换单个元素
html部分代码<div class="box"> <div class="box_wheel"> <ul class="box_ul"> <li style="background: pink;">AAA</li> <li style=&am
2018-06-14 14:25:53
5284
2
原创 jquery实现点击左右箭头切换
html部分<div class="contain"> <div class="box"> <ul class="box_wheel"> <li>111</li> <li>222</li> <li&
2018-06-13 16:54:51
11092
2
原创 jquery楼层特效（点击加滚动）
html部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} .
2018-05-31 14:19:28
4343
1
原创 原生js拖拽三部曲
js拖拽效果的主要事件：onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标抬起）var contain = document.getElementsByClassName("contain")[0] contain.onmousedown = (e) =>{ e = e || event; var x = e.clientX...
2018-05-30 17:55:44
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人