SF
前端开发
前端开发
注册登录
关注博客
注册登录
主页
关于
RSS
让编码习惯穿越编辑器editorConfig
小铀蔻德尔
2018-11-28
阅读 1 分钟
1.6k
编辑器就是生产力,符合个人编程习惯和风格的编辑器能给开发带来轻松愉快的心情和生产力。前端开发中越来越多东西需要通过配置文件来进行配置,现在编辑器也使用了这一方法。
webpack配置学习二-开发环境和打包环境执行不同打包
小铀蔻德尔
2018-11-28
阅读 1 分钟
3.3k
前端项目的开发在开发过程中和上线时需要的依赖是不同的,所以要求使用webpack打包的时候要能够在两种情况下执行不同的配置。带来的好处是上线的项目不依赖开发下的包,减少生产环境中所需要请求的依赖从而提升页面的性能。
webpack学习笔记1
小铀蔻德尔
2018-11-28
阅读 3 分钟
1.2k
为什么要使用webpack,没有打包工具之前,页面之中使用ES6、SCSS、TypeScript等浏览器不支持的前端新语法的时候都非常困难,有了webpack就可以非常方便的在项目之中使用这些新的语法,从而提升前端项目开发的速度和质量。另外在webpack之中项目中所有的资源都是模块,包括js,还包括css、图片等等。只要有合适的loader去...
js正则表达式学习笔记
小铀蔻德尔
2018-11-05
阅读 2 分钟
988
正则表达式创建字面量创建,a = /abc/gim;构造函数创建,a = new RegExp('abc','gim')正则表达式中的特殊字符,[...] 方括号中的任意字符[^...] 非方括号中的任意字符s 空白字符S 非空白字符d 数字D 非数字w 字母和数字,相当于[a-zA-Z0-9]W 非字母和数字重复{m,n} 介于m到n次之间{m} 恰好等于m次{m,} 大于等于m次? 0次...
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG
小铀蔻德尔
2018-10-31
阅读 6 分钟
3.9k
需求描述,由于工作的需要,需要将原本用于1280 720的网页改为1920 1080的网页(电视端页面)。需求可以拆分为两部分,代码部分的修改以及图片的修改。在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍。首先使用nodejs遍历当前的文件夹:
跨终端电子商务网站的实现
小铀蔻德尔
2017-07-15
阅读 2 分钟
3.8k
本系统从前端到后台实现了电子商务网站。页面实现了两套,分别用于PC端以及手机端。后台实现了用户的登录注册、加入购物车、结算功能,以及非常简单的商品信息录入功能。 前端页面使用的JS库是jQuery,对于手机端手势功能是自己实现的没有采用第三方JS库。后台使用的语言是Node,采用Express框架。数据库方面使用MongoDB...
跨终端电商平台的实现之手势效果(左右滑动)
小铀蔻德尔
2017-07-15
阅读 5 分钟
2.9k
移动端人机交互方式同PC端发生了本质的变化,在PC端使用鼠标和键盘进行交互,而移动端使用的是手指的触摸和滑动。PC端开发时主要监听鼠标事件,例如mouseEnter(鼠标进入事件)、mouseMove(鼠标移动事件)、mouseLeave(鼠标离开事件)。而在移动端监听事件为触摸的开始事件,触摸移动事件,以及触摸的结束事件。在本设...
跨终端电商平台的实现之移动端详情页多窗口切换(选项卡)效果实现
小铀蔻德尔
2017-07-15
阅读 5 分钟
2.9k
在移动端的商品详情页涉及多个内容切换的问题,这里使用选项卡设计方式,使用选项卡的设计是各大主流电商平台所采用主要形式,例如淘宝和京东。简单的选项卡实现起来比较容易,只要监听选项按钮并控制相应内容的现实与隐藏。如果只是单纯的显示和隐藏的话,对于用户的体验不好。所以改单纯的显示与隐藏为滑动的效果,要...
那是我夕阳下的奔跑,电商网站PC端详情页图片放大效果实现
小铀蔻德尔
2017-07-15
阅读 3 分钟
3.6k
在详情页浏览时商品大图还是不能完全看清楚商品的细节,该特效实现鼠标悬停在商品大图上时,在商品大图右侧出现放大镜效果并根据鼠标的位置来改变右侧大图的显示内容,放大镜中的内容和鼠标悬停位置的内容相同。该特效的实现效果图为: 对商品大图添加鼠标监听事件,首先监听鼠标的进入事件,在监听事件中将鼠标在大图上...
使用canvas实现弹幕功能
小铀蔻德尔
2017-04-20
阅读 13 分钟
9.4k
思路:从页面布局上来说就是将一块画布覆盖在了video标签产生的视频窗口之上,使用绝对定位就能实现了。最重要的就是js控制画布上弹幕的显示了,每一个弹幕都包装成一个对象,对象包含的属性有弹幕应该出现的时间,弹幕的颜色,弹幕是否是移动的以及弹幕的文本。弹幕对象拥有方法包含:设置弹幕的横纵坐标,弹幕的移动函...