- 博客(23)
- 收藏
- 关注
RSS订阅转载 原生js实现无缝滚动轮播图-点击页码即刻显示该页码的内容
演示地址：http://runjs.cn/detail/zk1oarmm前几天发布了一个轮播图实现的版本，并不是当时面试官的要求，今天有时间整理了轮播图实现的另一种思路： 动态改变父元素中的内容，设置父元素身上的left值，实现切换效果！html: <div class="container" id="container"> ...
2018-03-24 18:27:00
437
转载 原生js实现无缝滚动轮播图
演示地址：http://runjs.cn/detail/qzawzm8y前几天参加了zuoyebang的面试，其中的一道面试题要求实现百度百科的轮播图，今天有时间整理了一下轮播图中的其中的一种，无缝滚动轮播图，话不多说上代码。HTML: <div class="container" id="container"> <div id="bt...
2018-03-20 11:09:00
200
转载 vue封装tinymce富文本组件,图片上传回调方法
这里我用了tinymce，主要解决的是上传图片回调处理效果预览：第一步：下载tinymce资源，把tinymce放到static目录在index.html中引入tinymce.min.js文件<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js>...
2018-01-17 17:50:00
1052
转载 vue-cli项目结合Element-ui基于cropper.js封装vue图片裁剪组件
前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。本文是在vue-cli项目下封装图片裁剪插件，效果图如下：话不多说，看步骤吧。第一步：准备开发环境cropper.js是基于jquery的，所以要先安装jquery执行命令： npm install --save-dev jquery cropper为...
2018-01-17 16:39:00
403
转载 js实现多文件上传（二）-- 拖拽上传
演示地址html:<form > <div class="drag-wrapper"> 请将图片拖到此处 </div></form>css:<style> .drag-wrapper{ width:100%; ...
2017-12-22 17:23:00
370
转载 js实现多文件上传（一）-- 图片转base64回显
这里实现的是用<input type='file'>元素实现多文件上传演示地址第一步：html:input元素加上mutiple属性<form > <div> <input type="file" id="choose-file" multiple> <a href...
2017-12-22 16:50:00
309
转载 gulp压缩js报错，也许你需要用到babel
今天在使用gulp 压缩js时，遇到了这样的错误：从网上找了找原因，有网友说： js不知道哪里用到了es6语法，为了解决压缩js报错抱着试一试的心态，步骤如下：1.全局安装Babel。 npm install -g babel-cli npm install -g babel-cli --save-dev 2.新建配置文件是.babelrc，放在与bui...
2017-11-28 16:39:00
174
转载 webuploader编辑时回显文件放入队列的做法
最近一个项目中用到了webuploader, 一款优秀的文件上传的插件。API介绍很详细。详情见官网但是在FAQ中并没有找到回显文件列表的解决办法，又看了看api,找出了解决办法。话不多说，上代码：dom结构html:<div class="add-list-area add-list-area1"> <l...
2017-11-22 18:24:00
618
转载 ES中reduce()的用法
reduce 方法对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。语法array1.reduce(callbackfn[, initialValue])array1 必需。一个数组对象。callbackfn 必需。一个接受最多四个参数的函数。nitia...
2017-10-27 15:51:00
781
转载 强大的Javascript Standard Style，js代码风格指导，定位出错的代码
这款工具能定位错误到具体的文件，行数和第几个字首先确保你的电脑装了nodejs,npm全局安装：$ npm install standard --global在项目下安装，并存为依赖项：$ npm install standard --save-dev使用：在项目目录下直接输入命令$ standard就会出现错误的定位：...
2017-10-17 17:49:00
130
转载 angular-file-upload 回显已上传的文件
环境同前篇随笔，lizi在这里po下js代码演示地址http://runjs.cn/detail/o4a55204<script> 'use strict'; angular.module('app', ['angularFileUpload']) .factory("myService",function(){...
2017-09-11 20:40:00
298
转载 angular-file-upload 限制文件上传个数 获取已上传文件队列
引入资源同上一篇随笔第一步，不再赘述，第二步：构建应用 html 标签上 加指令：ng-app="app" body 标签上 加指令：ng-controller="AppController" html代码: <div class="pure-u-1-1" style="margin-bottom: 40px" &...
2017-09-04 08:55:00
619
转载 angular-file-upload 一款好用的文件上传组件，基本应用
基本应用演示地址：http://runjs.cn/detail/o4a55204下一篇 lizi 将会展示关于angular-file-upload的 拓展应用第一步：引入资源文件， 在 head 标签中引入资源 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstra...
2017-08-29 19:06:00
363
转载 css3实现网格背景,background-image，background-size
用纯css3实现网格背景，应该怎么做呢？需要给容器设置background-image,background-size属性 .container{ background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), ...
2017-07-28 17:50:00
599
转载 用ztree实现风琴式菜单树
最近项目中用到了ztree这款树形插件，完备的api,强大的功能真是令人叹服，在此，lizi分享基于ztree的风琴式菜单的制作。预览图：演示地址：http://runjs.cn/detail/a2vxktqu一、准备工作 1、引入核心js,metro样式 <link rel="stylesheet" href="css/reset.css"/&...
2017-07-17 15:53:00
254
转载 JavaScript下的setTimeout(fn,0)的作用，涨知识了
单线程的javascript首先我们来看浏览器下的JavaScript：浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线...
2017-05-08 16:40:00
119
转载 javascript高级程序设计--闭包
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。<script> function compareAge(age){ return function(p1,p2){ var age1 = p1[age]; var age2 = ...
2017-05-08 16:37:00
128
转载 函数声明与函数表达式
定义函数的方式有2种：函数声明函数表达式函数声明的形式function functionName(arg1,arg2){} 关于函数声明，它有一个重要的特性就是函数声明提升，意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。<script>sayHi();funct...
2017-05-08 16:27:00
100
转载 Grunt 入门
Grunt简介：插件丰富，功能强大，jshint对JS文件的检测，以及js和css文件的合并，压缩，是前端自动化压缩构建项目的得力助手。接下来就随lizimeme一起学习grunt的基本使用我的电脑安装了nodejs ,自动全局安装了npm(npm是随同NodeJS一起安装的包管理工具)第一步：windows系统下：npm insta...
2017-04-07 17:34:00
108
转载 对JS中_proto_和prototype的学习
JS中每个对象都会有_proto_属性，默认为Object，通过_proto_（原型链）去找它的父<script> var arr = [1]; console.log(arr);</script>//这里控制台输出，_proto_属性就是Objectproto属性的作用是用来确定当前对象的继承者，在当前对象找不...
2017-03-13 18:56:00
93
转载 左右无间切换走马灯angularJS指令
前一篇随笔介绍了offset*的知识，今天lizi用angular 指令写了左右按钮无间切换的实例，加深offset*知识的应用。思路如下：将容器内的内容复制一遍，采用相对父元素绝对定位的方式红色为复制的内容(左箭头)< 123456123456 >(右箭头) 点击左箭头：当图片定位显示为1时，让她定位到6...
2017-03-05 17:27:00
469
转载 CSS3制作立方体--有趣的应用
在此次制作过程中，我引用了jquery进行了dom操作，代码如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>making-cube</title> <style> ...
2017-02-20 17:43:00
102
转载 hello,2017
2017年，我开通了博客园，希望能在园子里与各位园友互相学习，成长，还望指教！转载于:https://www.cnblogs.com/lizimeme/p/6420405.html
2017-02-20 17:08:00
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人