文章库ARTICLE COLUMN

  • js放大镜效果

    js放大镜效果

    效果如淘宝、京东这些电商购物时,查看图片的放大效果。 思路: 先把右边的大图和左边小图里面的方块隐藏 当鼠标移入左边的smallPic,显示其里面的小方块和右边的bigPic 当鼠标移动里面的小方块,右边的bigPic显示图片对应的位置 小方块移动的范围在其父级...

    赵连江赵连江 评论0 收藏0
  • 利用键盘事件移动小方块小demo

    利用键盘事件移动小方块小demo

    摘要:思路根据键盘的值来判断是键盘上的哪个键通过定位利用键盘事件改编方块的和值通过开启定时器消除长按键盘的首次卡顿情况代码设置方向变量,后面需要用作判断设置移动的步进开启一个定时器根据方向变量进行判断按下方向键时检查方向的左上右下用语句来判...

    marekmarek 评论0 收藏0
  • -webkit-overflow-scrolling

    -webkit-overflow-scrolling

    摘要:概述属性控制元素在移动设备上是否使用滚动回弹效果值使用普通滚动当手指从触摸屏上移开,滚动会立即停止。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 概述 -webkit-overflow-scrolling 属性控制元素在...

    williamwilliam 评论0 收藏0
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    向zepto.js学习如何手动(trigger)触发DOM事件

    摘要:好啦我们已经解决了是啥的疑问了,现在回去开始一步步解读如何实现手动触发事件。我们主要看看这里面几乎含有如何手动触发一个事件的大部分步骤和内容。 前言 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向...

    fuyi501fuyi501 评论0 收藏0
  • 动手写个数字输入框3:痛点——输入法是个魔鬼

    动手写个数字输入框3:痛点——输入法是个魔鬼

    摘要:前言最近在用封装纯数字的输入框,开发过程中发现不是坑,也有不少值得研究的地方。因此我们能做的是通过事件作事后补救措施在中拦截输入法中输入的和按键事件,然后自行出发事件执行补救措施。 前言  最近在用Polymer封装纯数字的输入框,开发过程中...

    UnixAgainUnixAgain 评论0 收藏0
  • 把图标转成web字体

    把图标转成web字体

    摘要:这章要说的是如何把自己设计的转成,在网页上使用字体图标除了图像清晰度之外,主要还是清晰度,特别是用于手机上多屏的情况无论屏幕何种分辨率都不会模糊,不用额外做响应处理。 对字体大家一定不陌生一般使用Font-family: Georgia, SimSun, 宋体...

    wua_wua2012wua_wua2012 评论0 收藏0
  • 垂直居中解决方案总结

    垂直居中解决方案总结

    摘要:而的百分比是相对于元素自身的宽高,这个方法可以用于子元素高度不确定时,而且不用手动除以,比上面几个方便了很多。,全为可以实现上下左右居中,超级方便这也是我在项目里用得最多的。上面是基于绝对定位的解决方案,还有其他的。 点这个链接可以直...

    王伟廷王伟廷 评论0 收藏0
  • webpack学习心得

    webpack学习心得

    摘要:学习心得出于对的好奇,决定要去学习门技术,提升自己。安装命令行输入回车,全局安装命令行输入回车输出版本号,表示安装成功。进入到我们的项目中,我创建的项目为,在这个项目下创建配置项,命令行输入一路回车。 webpack学习心得 出于对webpack的...

    only_doonly_do 评论0 收藏0
  • 使用iscroll4可能会遇到的问题(转:记录)

    使用iscroll4可能会遇到的问题(转:记录)

    摘要:只针对,因为的暂时还不支持,会自动选择不用。原因还是和问题一样的,因为屏蔽了默认事件。在技术上解决不了的问题,我认为还是多和产品和沟通比较好,共同协商一个良好的方案。 1.在iscroll4的滚动容器范围内,点击input框、select等表单元素时没有...

    褰辩话褰辩话 评论0 收藏0
  • 纯CSS实现侧边栏/分栏高度自动相等

    纯CSS实现侧边栏/分栏高度自动相等

    摘要:一为何要分栏高度一致分栏高度一致的目的是更加美观。二纯实现侧边栏分栏高度自动相等这里直接介绍我认为的最佳的侧边栏分栏高度自动相等方法。 一、为何要分栏高度一致?分栏高度一致的目的是更加美观。举两个例子吧。 ① 对于分栏布局,我们或许会用...

    li21li21 评论0 收藏0
  • CSS布局——左定宽度右自适应宽度并且等高布局

    CSS布局——左定宽度右自适应宽度并且等高布局

    摘要:今天有位朋友一早从妙味课堂转来一个有关于布局的面试题,需要解决,花了点时间写了几个放上来与大家分享受。 今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前...

    dreamtecherdreamtecher 评论0 收藏0
  • 手把手和你用原生JS写一个循环播放图片轮播

    手把手和你用原生JS写一个循环播放图片轮播

    摘要:前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循环播放的图片轮播组件,本文就将相关制作经验分享给大家。作为演示,用标签代替了图片。关键使用不同背景色的替代图片。 前段时间学习了淘宝首页的静态页面,其中收获较大的的就是这个循...

    dendoinkdendoink 评论0 收藏0
  • 页面制作(切图)第一章

    页面制作(切图)第一章

    摘要:首先要知道什么叫页面制作切图页面制作切图就是,前端工程师通过和还原设计师的设计稿。每个大的行再按照这种方式拆成内部若干行或者左右若干块如下图拆分完之后对于不同块根据宽度高度特性,选择使用块级元素或者内联元素来表示。 CSS+HTML实战 经过...

    felix0913felix0913 评论0 收藏0
  • 移动前端 - 收藏集 - 掘金

    移动前端 - 收藏集 - 掘金

    摘要:使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起,相信大家并不陌生。 Sticky Footer,完美的绝对底部 - 前端 - 掘金写在前面 ...

    JochenJochen 评论0 收藏0
  • 2017-06-05 前端日报

    2017-06-05 前端日报

    摘要:精读的困境文字描边属性及展开读源码之操作我眼中的前端九段从前端开发看面向未来的敏捷学习法 精读《Web Components 的困境》-webkit-text-stroke文字描边CSS属性及展开读Zepto源码之操作DOM我眼中的前端九段从前端开发看面向未来的敏捷学习法N-API: ...

    elinaelina 评论0 收藏0
  • 初探响应式布局 - 以小项目为例

    初探响应式布局 - 以小项目为例

    摘要:一响应式布局最近在项目开发的时候,发现了自己对布局方面的一些不足之处,特别是适配不同分辨率方面,几乎是没有经验的。在查阅了相关资料之后发现,响应式布局是目前解决不同分辨率显示问题的最好解决方案。 一 响应式布局 最近在项目开发的时候,发...

    casparcaspar 评论0 收藏0
  • CSS进阶——绝对定位元素的宽高是如何定义的

    CSS进阶——绝对定位元素的宽高是如何定义的

    摘要:绝对定位元素的布局计算公式表示内容宽度,即标准盒子模型默认值是默认值是以水平方向从左至右为例说明一下绝对定位元素的位置或大小是如何定义的。 先抛两个小问题: 绝对定位相对于谁来定位? 大多数人都知道是相对于最近的position设置为relat...

    terenteren 评论0 收藏0
  • CSS3如何实现0.5边框

    CSS3如何实现0.5边框

    摘要:在移动端有时的边框会显得很粗不美观,淘宝京东的触屏均是采用浅细的线条来显示在移动设备上。 在移动端有时1px的边框会显得很粗不美观,淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下: 普通的1px黑色实线边框: border: ...

    fobnnfobnn 评论0 收藏0
  • 清除Css中select的下拉箭头样式

    清除Css中select的下拉箭头样式

    摘要:清除中的下拉箭头样式和里面的边框是不一样的,所以复写了一下很关键将默认的选择框样式清除在选择框的最右侧中间显示小箭头图片为下拉小箭头留出一点位置,避免被文字覆盖清除的默认选择框样式清除,隐藏下拉箭头 清除Css中select的下拉箭头样式 sel...

    pekonchanpekonchan 评论0 收藏0
  • mouseenter与mouseover为何这般纠缠不清?

    mouseenter与mouseover为何这般纠缠不清?

    摘要:而当鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。造成以上现象本质上是事件不支持冒泡所致。事件属性返回与事件的目标节点相关的节点。我们通过排查和,最后只留下,也就是与事件一起触发的时机。 前言 原...

    王岩威王岩威 评论0 收藏0
  • 前端面试之Css篇

    前端面试之Css篇

    摘要:替换元素是指用作为其他内容占位符的一个元素。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。折叠的结果两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。两个外边距一正一负时,折叠结果是两者的相加的和。 ...

    leejan97leejan97 评论0 收藏0
  • 移动端响应式

    移动端响应式

    摘要:一些基础请看这篇的一篇真正教会你开发移动端页面的文章二这段代码是让布局视口的尺寸等于理想视口。响应式工作大,维护性难缩放天猫,使用布局,字体单位用淘宝,使用库,是他们自己的一个库,思想就是根据去动态设置,元素宽高都用。 0.一些基础 请...

    huayeluoliuhenhuayeluoliuhen 评论0 收藏0
  • 垂直居中

    垂直居中

    摘要:基于绝对定位基于视口单位百分比行不通,因为的百分比值是以父元素的宽度作为解析基准的。没错,即使对于和来说也是这样以下方法基于,,,单位,只适用于在视口中居中的场景。基于或注本文根据一书整理,便于查阅 基于绝对定位 main{ position:ab...

    dingding199389dingding199389 评论0 收藏0
  • css常用字体速查

    css常用字体速查

    摘要:苹方苹方简体苹方繁体中文黑体宋体新宋体仿宋楷体仿宋楷体微软雅黑体英文 苹方 苹方简体 font-family: PingFangSC-Regular, sans-serif; font-family: PingFangSC-Ultralight, sans-serif; font-family: PingFangSC-Light, sans-serif; font-family: ....

    xiangzhihongxiangzhihong 评论0 收藏0
  • 网页图片缩放的深入剖析

    网页图片缩放的深入剖析

    摘要:一浏览器图片缩放默认表现行为行为在想出解决方案之前,首先要弄清楚浏览器对于图片尺寸是怎么处理的,稍安勿躁,一步一步来分析下。图片宽度随容器宽度缩放,图片宽高比不变,图片高度高于容器时会溢出。 一、浏览器图片缩放默认表现行为行为 在想出...

    noONEnoONE 评论0 收藏0

热门文章

<