![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
文章平均质量分 68
「已注销」
广结善缘,任何值得做的事情,都值得把它做好。
展开
-
常用网页特效-瀑布流布局(开源)
瀑布流无限加载 body, ul, li { margin:0;padding:0;list-style-type:none;} #main {position:relative;margin:5px;width:90%;} #main ul li {position:absolute;border:1px solid #CCCCCC;text-align:cent原创 2016-06-02 21:40:09 · 488 阅读 · 0 评论 -
SASS(SCSS)开发环境搭建(webstorm做编辑器)
sass安装:根据实际操作的过程,总结以下步骤:(限window系统)1、下载网址:http://rubyinstaller.org/downloads/ 运行安装(只管点击next即可)。2、回到电脑桌面->在开始程序中找到Start Command Prompt with Ruby,如下图点击后出现命令窗口:命令行中输入:gem in原创 2017-03-14 13:57:03 · 3278 阅读 · 0 评论 -
浅析JS模块规范:AMD和CMD
在了解AMD,CMD规范前,我们先来简单地了解下什么是模块?简单的说,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。当然,模块开发需要遵循一定的规范,否则各用各的就会乱套了。目前,常用的JS模块规范主要有两种:CMD和AMD。AMDAMD,异步模块定义(A转载 2017-03-17 10:32:13 · 429 阅读 · 0 评论 -
jquery&zepto实现商品飞入购物车(手机端&PC端)
最近做一个手机端的商品加入购物车的项目, 首先引入jquery .js 手机端引入zepto.js 但是zepto没有animate的这个方法 需要引入fx这个模块。主要代码如下:/*飞入购物车*/ $('.btn-buy').bind('click',function(){ var img = $(this).parent().find('img');原创 2017-05-11 11:18:35 · 963 阅读 · 1 评论 -
移动web之滚动篇
知识点1:移动web滚动问题在移动端,使用滚动来处理业务逻辑的情况有很多,例如列表的滚动加载数据,下拉刷新等等都需要利用滚动的相关知识,但是滚动事件在不同的移动端机型却又有不同的表现,下面就来一一总结一下。滚动事件:即onscroll事件,形成原因通俗解释是当子元素的高度超过父元素的高度时且父元素的高度时定值window除外,就会形成滚动条,滚动分为两种:局部滚动和转载 2017-05-24 16:51:15 · 2570 阅读 · 0 评论 -
一些前端书写规范建议
1. 书写规范1.1 项目结构1.2 项目命名规范项目:用项目对应的英文单词命名文件及文件夹:全部英文小写字母,可以使用中线,不可出现其他字符,如login,my-order调用 `/lib`里面的文件需包含版本号,压缩文件需包含`min`关键词,其他插件则可不包含,如:`/lib/jquery.1.9.1.js`1.转载 2017-05-24 17:08:43 · 411 阅读 · 0 评论 -
CSS3实现正方形立方体旋转
直接上代码html结构: css样式: *{ padding: 0; margin: 0; } .box{ position:原创 2017-04-24 16:05:09 · 1760 阅读 · 1 评论 -
javascript实现九九乘法表
document.write(''); for(var i=1; i<=9; i++) { document.write(''); for(var j=1; j<=i; j++) { document.write(''); document.write(i + '*' + j + '=' + i * j);原创 2017-04-24 16:13:56 · 663 阅读 · 0 评论 -
javascript求1-100的平方和--三种实现方法
var s1 = 0; for(var i=1; i<=100; i++) { s1 = s1 + i*i; } document.write('第一种方法:'); document.write('1-100的平方和为:' + s1); //1-100的平方和为:338350var s2 = 0; var i = 1; while原创 2017-04-24 16:22:18 · 4872 阅读 · 0 评论 -
JavaScript实现继承的几种方式
这篇文章主要介绍JavaScript实现继承的方式:类式继承构造函数继承组合继承寄生组合式继承extends继承1、类式继承简单的类式继承:// 声明父类function Animal() { this.name = 'animal'; this.type = ['pig', 'cat'];}// 为父类添原创 2017-07-24 11:11:04 · 396 阅读 · 0 评论 -
编写自己的代码库(javascript常用实例的实现与封装)
2.字符串操作2-1去除字符串空格//去除空格 type 1-所有空格 2-前后空格 3-前空格 4-后空格function trim(str,type){ switch (type){ case 1:return str.replace(/\s+/g,""); case 2:return str.replace(/(^\s*)|(\s*$)/g原创 2017-08-10 16:38:54 · 619 阅读 · 0 评论 -
CSS动画案例-无缝滚动
ec-css无缝滚动 .demo-marquee { width: 400px; margin: 20px auto; overflow: hidden; } .demo-marquee ul { width:原创 2017-08-10 17:18:20 · 1649 阅读 · 0 评论 -
js原生实现百叶窗上下滚动
直接上代码* { margin: 0; padding: 0; } #uli { width:250px; height:auto; float:left; border-top: 1px solid #000; margin:20px; } li { list-style: none; width: 100%; heig原创 2017-08-14 11:24:28 · 1635 阅读 · 0 评论 -
ES6-面向对象实现tab切换
直接上代码 ES6-tab .on {background: #f60;color:#fff;} .box div{display: none; border: 1px solid #000; width: 200px; height: 200px; } 111 222 333原创 2017-10-30 17:44:43 · 1857 阅读 · 0 评论 -
使用vue-cli+axios构建的项目本地环境API代理设置和解决跨域
问题描述:使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问 localhost:8888 上的接口。分析原因:不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置。 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求。解决方案:首先axios不支持vue.use()方式声明使用, 建议方式在main....翻译 2018-03-09 15:04:48 · 2940 阅读 · 1 评论 -
vue简单实现发送验证码倒计时
<span v-show="show" @click="getCode">获取验证码</span><span v-show="!show" class="count">{{count}} s</span>data(){ return { show: true, count: '', timer: null原创 2018-03-22 16:49:40 · 2639 阅读 · 0 评论 -
Js原生实现轮播图
* { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body原创 2017-02-27 11:20:44 · 317 阅读 · 0 评论 -
WebStorm 2017 最新版激活(activation code方式)
注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址:http://idea.iteblog.com/key.php点击:Activate即可。如有其它方式可以相互交流!原创 2017-02-27 11:09:57 · 1548 阅读 · 0 评论 -
JQuery选择器归纳
1、基本选择器选择符 匹配元素* 所有元素id 给定ID的元素element 给定类型的所有元素.class 给定类的所有元素a,b 与a或b匹配的元素a b a的后代元素中与b匹配的元素a>b a的直接子元素中与b匹配的元素a+b a的直接同辈元素中与b匹配的元素a~b a的同辈元素中与b匹配的元素2、位置选择器选择符 匹配原创 2016-06-02 21:24:21 · 213 阅读 · 0 评论 -
整理了一些HTML5新的元素
canvas标签 描述标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API多媒体标签 描述定义音频内容定义视频(video 或者 movie)定义多媒体资源 和 定义嵌入的内容,比如插件。为诸如 和 元素之类的媒介规定外部文本轨道。表原创 2016-06-02 21:17:24 · 337 阅读 · 0 评论 -
Canvas参考
颜色、样式和阴影 属性 描述fillStyle 设置或返回用于填充绘画的颜色、渐变或模式strokeStyle 设置或返回用于笔触的颜色、渐变或模式shadowColor 设置或返回用于阴影的颜色shadowBlur 设置或返回用于阴影的模糊级别shadowOffsetX 设置或返回阴影距形状的水平距离sha原创 2016-06-02 21:09:08 · 309 阅读 · 0 评论 -
移动前端知识的一些总结
Titlemeta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面?html 代码 content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>忽略将页面中的数字识别为电话号码原创 2016-06-11 21:46:01 · 278 阅读 · 0 评论 -
使用原生JavaScript实现AJAX、JSONP
一、AJAXAJAX的核心是XMLHttpRequest。一个完整的AJAX请求一般包括以下步骤:实例化XMLHttpRequest对象连接服务器发送请求接收响应数据我将AJAX请求封装成ajax()方法,它接受一个配置对象params。function ajax(params) { param原创 2017-02-17 14:00:01 · 4959 阅读 · 0 评论 -
JavaScript--&&--JQuery功能的代码对比(三)
之前已经列举了大量的使用原生JavaScript替代JQuery的例子,在本文中将继续列举!1、表单获取焦点$('#test').focus(); $('#test').focus(function(){});var t = document.getElementById('test');function addEvent(dom,原创 2017-02-17 10:20:22 · 265 阅读 · 0 评论 -
JavaScript--&&--JQuery功能的代码对比(二)
从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。而在之前已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。1、位置获取相对于文档的位置$('#test').offset() function offset(elem)原创 2017-02-17 10:15:57 · 316 阅读 · 0 评论 -
JavaScript--&&--JQuery功能的代码对比(一)
当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的项目需要在IE8之前的浏览器中使用,建议还是使用JQuery,这样可以省却很多兼容性问题)。下原创 2017-02-17 10:04:18 · 849 阅读 · 0 评论 -
js+css实现点击按钮水波纹
.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px; border: 1px solid #d9d9d9; outline: none;原创 2017-02-15 13:46:53 · 6438 阅读 · 0 评论 -
Vue.js入门-简介和指令介绍
Vue.js的概述如官网所说,Vue.js是一款轻量级的以数据驱动的渐进式JavaScript 框架。老卜的 前端开发之走进Vue.js介绍到:Vue.js数据驱动的原理在于View层的视图发生改变时,Vue会通过DOM Listeners来监听并改变Model层的数据。反之,当Model层的数据发生改变时,也会通过Data Bingings来监听并改变Vi转载 2017-02-20 14:48:49 · 880 阅读 · 0 评论 -
手机端页面自适应解决方案—rem布局进阶版(附源码示例)
该方案使用相当简单,把这段 原生JS 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n转载 2017-02-21 13:45:52 · 709 阅读 · 0 评论 -
javascript数组去重方法之一
个人觉的这个方法还是比较好用的,如有问题欢迎指正。原创 2017-02-22 11:42:39 · 340 阅读 · 1 评论 -
HTTP的一些状态消息参考
1xx:信息消息描述100 Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。101 Switching Protocols服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。2xx:成功原创 2016-05-11 22:36:01 · 258 阅读 · 0 评论 -
javascript常见的闭包的应用(部分)
比较常见闭包的两个应用问题 1 2 3 4 5 //ul中有若干个li,每次点击li,输出li的索引值 var lis = document.getElementsByTagName('ul')[0].children; for (var i = 0; i < lis.len原创 2017-02-22 11:57:43 · 339 阅读 · 0 评论 -
前端开发常用API合集
一、节点1.1 节点属性Node.nodeName //返回节点名称,只读Node.nodeType //返回节点类型的常数值,只读Node.nodeValue //返回Text或Comment节点的文本值,只读Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写Node.baseURI //返回当前网页的绝对路径Node.o原创 2017-02-14 16:07:45 · 6162 阅读 · 0 评论