• box-flex与flex的不同,从渲染机制猜想进行深层分析,box弹性布局的不完善性以及解决方法,flex弹性布局的优点
    2016-12-24 00:46
        弹性布局是CSS3的特性,在移动端兴起的当下,以及Microsoft宣布退出浏览器市场的情况下,我们可以考虑在移动端甚至PC端大范围使用弹性布局来书写我们的web页面,弹性布局会使我们的工作比以前轻松不少,有了弹性布局可以说浏览器的渲染定位更加智能了。而弹性布局有两种实现方式,一种是display:-webkit-box;一种是display:flex。面对这两种弹性盒子模型,相信不少人都有这个疑问,这两者到底有什么区别呢?我应该用哪一个呢?还是随便用哪一个都行呢?  &nbs...
  • checkbox_checkbox选中_checkbox操作--复选框技巧
    2017-01-01 18:34
            checkbox复选框在页面中是很常用的,我们平时操作它大部分是通过jquery来实现的,今天我们通过原生js操作,并且探讨checkbox的一些特性。        首先我们在页面中定义一个checkbox。<input type='checkbox' id='ck'/> 之后获取che...
  • 跟随弹窗位置的确定,以及位置自适应-获取dom元素的确定位置,智能显示跟随弹框
    2016-12-24 00:50
        我们在页面弹窗中,总会需要一些弹窗能够跟随DOM的位置出现,叫做“跟随弹窗”。而跟随弹窗最好的要求就是要能根据dom元素所在的位置自动调整跟随dom的方位,以便让弹框完整的显示在可视区中。由于这个实现需要比较麻烦的算法,我们通常的写法就是根据直接让弹窗的左上角对齐dom元素的左下角或者左上角。这样写出的弹窗适应性比较差。   今天我们就来讲解一下让弹窗能自动调节跟随方位的算法问题。下面空间不足的时候,跟随弹窗自动显示在dom的上方。上下空间都不足的时候,让跟随弹框显示...
  • 移动端页面应该怎么写?移动端布局的一些小见解
    2016-12-20 23:52
        移动端在web行业所占的比重越来越大,而移动端,主要是手机端,屏幕的大小各部相同,我们需要让我们的页面在各个页面中显示出来的效果一致。      这张图是我从网上找的一张设备的分辨率图,我们需要参照的就是设备独立像素这一列。可以看到大屏的宽度才414,而小屏的宽度320。具体详细的移动端的分辨率和设备像素的关系可以自行百度,网上有很多这个的介绍。选用图片时,我们要注意一下这个设备像素比(又叫倍率):比方iphone5上的100px宽的图片...
  • 原生js操作select,optgroup,options,option对象
    2016-12-20 20:35
        对于select对象我们并不陌生,但是要说通过原生Js操作select的话,就有许多人对此很茫然。其实这是由于我们平时实用的少,所以才对select知道的甚少。今天我们就通过一起探讨的方式来讲解一下Js操作select的方法,以及其兼容性。    创建select元素跟创建其他的dom元素一样,通过createElement就可以实现,其子元素option也可以直接创建。我们看一下代码var select=document.createElement(&qu...
  • Touch事件浅析---touch和mouse事件的映射
    2017-03-06 16:43
          近几年,移动端的发展如同旭日东升版迅速崛起,移动端在整个internet中所占的流量比例不断增加。这使得我们开发web应用的时候必须要考虑移动端的适用。甚至可能只考虑移动端使用,比如微信应用就是如此。但是但部分情况下,我们还是要考虑同时适用移动端和PC端,现在已经有一些大型的BS架构的管理系统也支持移动端了。这是一个很好的用户体验,比较拿出手机点击下,比找台电脑再开机等等的花销要少很多,方便很多。但是你不能只支持移动端,而不支持电脑端,毕竟有一些复杂操作,在手机上操作时有困难。  &...
  • 单页效果-切屏原理以及简单插件实现
    2016-12-18 16:47
       页面中单页切屏的效果在做宣传的时候是常用的一个效果,无论是在PC端还是在移动端,它无意都是一个很不错的宣传页的架构。今天我们就探讨一下切屏功能的原理。 首先分析切屏插件的结构,切屏就是当前只显示一屏内容,当点击列表或者滚动鼠标滚轮时切换到下一屏内容或上一屏内容,每一屏的内容中可能有动画或者特效,这些插件不负责实现,由使用这根据特效需求自己实现,插件只提供在一屏内容开始切换时的回调函数接口,和一屏内容切换完成时的回调函数接口。 其实切屏插件就是图片轮播插件中的全屏轮播,你可以使用swiper...
  • js 鼠标滚动事件的兼容,同化处理
    2016-12-18 13:39
      我们在处理浏览器兼容问题的时候,通常是IE和其他浏览器进行区分。而这里处理鼠标滚轮事件的时候,确实FireFox和其他浏览器。Firefox钟情于自己的DOMMouseScroll事件,而其他浏览器则采用的是mousewheel事件。而mousewheel这个名字听起来更像鼠标滚轮事件,而火狐的那个名字就有些不好记了。var wheelname=navigator.userAgent.indexOf("Firefox")>0?"DOMMouseScroll":&qu...
  • 判断JS中的数据类型,通过typeof 和object对象的tostring方法获取
    2016-12-13 01:07
    jquery中有一个方法,$.type(obj)来检测数据类型,用过的前端都应该知道,他能准确的返回一个对象的类型的字符串形式。今天我们就来分析一下jquery这个方法的实现原理。可能你会说,既然jquery已经提供了这么好的方法了,我们拿来直接用不就得了。确实,拿来主义省事又省事;但如果一直这样的话,你的js水平只能是依赖中jquery的基础上,离开了jquery你什么也干不了了。这并不可怕,现在我们的项目中都在用jquery,甚至移动端我们还有zepto可以替代jquery使用。  现时,已经有好多新兴的前端框架出来了(...
  • DIV右上角标签的CSS3实现技巧
    2016-12-11 14:51
    我们在写页面中,经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性,今天我们就探讨一下这个标签的实现方式我们一般要实现这种标签的时候通过用css3的rotate来实现,并且大部分人实现时是通过一像素,一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的,因为他没有实用性,我们好不容易写好了一个角签,然而他只能在这个样式或者这个角签内容时是正常的。上面是我计算的草稿,这个是计算的左上角的角签的偏移计算。其中用到了translate百分比的特性,他跟margin和padding不...
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1