最近学习了Zepto框架,Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件很小,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动
<meta name="viewport" content="width=device=width,initial-scale=1,user-scalable=0">
对于未对中国大陆优化的博客站点而言,图片懒加载几乎是必备的功能,它能够有效提高页面的首屏速度。静态站点的懒加载方案有很多,但都必然会带来布局偏移的问题,影响页面的 CLS 分数。
最近项目中入手了一个非常实用的插件,这里和大家一起分享下:通过canvas实现图片裁剪的工具--cropper.js
本项目是对冰卡诺老师写的教程:基于Butterfly主题的分类磁贴2.0版进行重构,去除了所有繁杂的引入js的过程,所以也就无需引入jquery和vue,也完美支持pjax。当前4.0版本可以自动获取分类及文章数。封面和描述配置项直接嵌入配置文件。支持自定义行数,超过自动切换为滚动显示。可选择三列或四列显示。
2个月前,写过一篇文章《从网易与淘宝的font-size思考前端设计稿与工作流》总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那篇文章的总结,可惜的是因为项目的关系,这两个月来几乎没有机会做移动类项目的工作,所以那些理论一直没有得到真正的实践。这次因为公司有一个app需要做一个推广的下载页面,虽然简单,但也值得一试那篇文章里提到的适配方法,所以本文的内容就是介绍该文中提到的淘宝的做法:《lib-flexible弹性布局方案》。(注:该文中提到的网易的做法跟淘宝的做法其实是大同小异,你访问http://3g.163.com/touch/看下页面源码顶部的JS就能明白了。相较于淘宝的做法,淘宝的方法更能称之为一个方案,网易的做法代码质量实在不敢恭维,所以从本文的角度,推荐淘宝的lib-flexible)
提到响应式,就不得不提两个响应式框架——bootstrap和foundation。在标题上我已经说明白啦,今天给大家介绍的是foundation框架。 何为“尝鲜”?就是带大伙初步一下foundati
如果你要制作一个全屏的网页,使用这个插件在合适不过,如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> 2.引入jq 和 fullpage.js文件 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <script
可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的效果。
数据可视化源码已上传到网盘,关注【青年码农】,后台回复【大屏源码】,提供网盘下载。
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。 1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。 多个回调函数。
CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例
最近 YouTube 将其网站上视频的播放格式改为 16:9 宽屏模式播放,原有 4:3 模式的视频依然可以兼容播放。
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。
Heatmap,已经有网站提供此类服务,如:clickdensity,clicktale,crazyegg等等,甚至还有类似clickheat项目提供源代码供你直接使用。
1、dip device independent pixels(设备独立像素). 不同设备不同的显示效果,这个和设备硬件有关, 一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素。 dip的换算: dip(value)=(int) (px(value)/1.5 + 0.5) 2、dp 等同于dip一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px。 3、px pixels(像素) 屏幕上的点,不同设备不同的显示屏显示效果相同,这是绝对像素,是多少就永远是多少不
使用Bootstrap前端框架-栅格 要点 1.使用Bootstrap需要引入的css和js: (1)bootstrap.min.js (2)bootstrap.min.css 2.栅格系统需要通过 进行承载 3.div相比于table更适合目前的开发,友好度较高 4.栅格参数 <768px(手机) >=768px(Pad) >=992px(小型显示器) >=1200px(宽屏显示器) .col-xs- .col-sm- .co06
经过一年多不断改进和完善后,jQuery Mobile 终于发布 1.0 正式版。
之前分享了10个炫酷的数据可视化大屏源码,反响很大,好多人在后台回复获取源码,这次,我又带来了12个炫酷的数据可视化大屏源码,都是从网上收集的,都测试后可以使用,在我电脑(1920X1080分辨率下)正常显示,所以分享给大家 1.产业大数据展示 基于jquery,echarts编写,文件目录清晰,只包含一个index文件,极速上手修改 📷 2.华东宁波正正保税A仓 基于jquery,echarts编写,版面整洁 📷 3.可视化监管平台 基于jquery,echarts编写,版面炫酷,该有的图表都有 📷 4.
在自然界之中,蛇的眼睛有夜视功能,即便是茫茫黑夜,它也能轻而易举的找到猎物,这是因为任何物体都会辐射热红外,且辐射的高低和温度成正比,由于生命体的体温会明显高于周围环境的温度,所以在蛇眼面前便无处遁形。热红外成像被广泛应用于军事领域,士兵带上能识别热红外的眼镜后能轻而易举的发现藏匿的敌人。
在做移动端项目时,有一个逃不掉的问题:在手机上,1px的细线会看起来更宽。其实这不仅是手机上会出现的问题,准确来说,这是高清屏的“通病”,在高清的PC上也会同样有。
手动,画的比较丑啊,前端开发这个活儿只是程序员中的一小部分,它做的工作就是让用户可以用鼠标在网页上各种点点点,然后实现一些相应的功能,上档次一点的说法就是人机交互,用户体验什么的,大白话就是,你做的网页上的功能得让用户使用的舒服。
| 导语随着移动端的屏幕迅猛发展,越来越多的异形屏幕诞生了;这给用户带来了全新的体验,也同时给开发者带来了适配的问题。在本篇文章中主要描述了全民K歌在折叠屏适配上的探索与常见的适配方案梳理。 引 现如今,移动端屏幕的发展可谓迅猛百花齐放! 在之前,我们已经适配了:不同比例、圆角、挖孔、刘海… 是时候,让我们开始适配折叠屏吧! 本篇文章主要介绍折叠屏的基础概念及几种适配方案;同时涵盖了全民K歌在折叠屏上的适配探索与实际效果。 折叠屏 折叠屏,顾名思义,其显示屏采用柔性技术,可在使用时对屏幕进行折叠、展开
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上
jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件。jQuery Mobile继承了jQuery的优势,并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。
显示器是属于电脑的I/O设备,即输入输出设备。它可以分为CRT、LCD等多种。它是一种将一定的电子文件通过特定的传输设备显示到屏幕上再反射到人眼的显示工具。当用电脑来放松娱乐时,一个好的显示器则是必不可少的,看VCD时画面稳定;玩游戏时现场逼真,有一种身临其境的感觉,那种感觉一定特棒,这一切都取决于你选择的显示器品质的高低,对显示器的知识有一个综合的了解无疑会对你有所帮助,下面将就这一问题给大家做详尽的讲解。
大屏数据的页面里面包含了一些3D地图和世界航班趋势图,反应上来有个问题,就是动画比较卡顿。
2015年6月29日更新:本文章发布时间较早,不建议继续阅读,并且该插件后续已经修复此问题,大家可以放心使用。
有的时候看到一些3D游戏锯齿感特别明显,与一些开发者沟通后发现,其实很多人并不清楚怎么能去掉明显的锯齿感,而这并不是只有新开发者才遇到的问题,很多游戏研发经验丰富的开发者,甚至是使用LayaAir引擎开发了很多游戏的开发者也会不清楚。另外,最近也遇到有开发者想了解刘海屏如何适配,所以通过本篇文章全面介绍一下。
室内全彩大屏数据的页面里面包含了一些3D地图和世界航班趋势图,反应上来有个问题,就是动画比较卡顿。
对于一个实时数据产品人员、或者开发人员来说,产品上展示的实时数据,pv、uv、gmv等等,怎么知道这些数据是不是正确的呢?当其他的小组开发的产品的数据(或者其他的数据提供方)又是另外一个数字,那么究竟该如何判断自己的数据还是别人的数据是正确的呢?这就需要一套实时数据对数方案,本文主要从背景、实时数据计算方案、对数方案、总结四方面来介绍,说服老板或者让其他人相信自己的数据是准确的、无误的。
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是饭的列表等等。反正挺实用,值得收藏!
如果您使用的是jQuery,则可以使用jQuery方法获取窗口或document的大小:
最近开发项目在和华为Volte做对接,结果华为volte第一版还是原生加jquery来实现的,由于里面有不少需要引入外部js文件的,就给了一天的时间做对接,没办法只能剑走偏锋了 首先定义一个 utils/loadScript.js 封装一个动态加载js文件的方法
宽屏适配、禁止截屏和保持屏幕常亮,这三个与屏幕有关的 Android 开发小众知识,说不定什么时候就派上用场。
说是破解,其实也就是想办法把防切屏解了。 之前有些考试软件防止切屏可以用虚拟机,稍微复杂一点,至于浏览器检测切屏,无非就是检测焦点,像有些网站的动态标题就是这样,那么用什么来实现检测焦点呢?这里不得不提到JavaScript。
怎样算是个体面的前端攻城狮? 大概是,PM,设计,开发等工种都觉得你很专业,很腻害吧~ 下面阐述下我心中体面攻城狮该具备的 软件 能熟练使用前端会用的软件。软件主要分为以下几类 IDE 我用的是Su
作者简介:诸葛子房,目前就职于一线互联网公司,从事大数据相关工作,了解互联网、大数据相关内容,一直在学习的路上。
制作一个盛放内容的盒子,在BlogRoot/themes/butterfly/layout/includes/head.pug最后一行加入如下代码:
只要不是高度近视,就会发现张戈博客的文章最近加上了这个仿异次元百度分享工具条。增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及右侧的卷动按钮在 1280*800 分辨率下,会被广告遮盖,有点不爽。于是就想起了以前看到过的这个玩意儿。 前天,经过一番折腾后,如愿以偿的加上了这个功能,感觉挺不错的!当我回访重量网络博客时,发现他的工具条有个很棒的功能,那就是字体大小及侧边栏控制,可使用大字体,并开启宽屏浏览!感觉很棒! 于是,就给他留言,想他给下源码。第二天还是没回复我(应该是
通常情况下,通过对构造函数使用 new 会返回一个绑定到 this上的新实例,所以我们可以在 new 出来的对象上直接用 . 访问其属性和方法。如果在普通函数中也返回当前实例,那么我们就可以使用 . 在单行代码中一次性连续调用多个方法,就好像它们被链接在一起一样,这就是链式调用,又称链模式。
不用盲目的百度和问大神们WebApp 开发使用哪个框架最好?等等问题。在此,小编尽量解答各位的WebApp 问题。根据国内js大神以及有过WebApp 开发经验的前辈们分析,小编推荐下面6款常用的WebApp 开发框架。
领取专属 10元无门槛券
手把手带您无忧上云