【转载优文】 css3实现的switch开关按钮
04 02 2016
css3实现的switch开关按钮

逛前端贴的时,发现这篇文章挺有意思。就转了过来。这盘文章是利用了来模拟实现。然后增添了一些效果过渡。形成了一种IOS风格的开关按钮。HTML代码:在实际的使用中后来又增加了两个过渡效果,分别加 mui-switch-animbg和mui-switch-anim 类即可,具体效果查看下面的demo页面。CSS代码(SCSS导出的,排版有些奇怪):.mui-switch {width: 52px; height: 31px; box-shadow: #dfdfdf 0 0 0 0 inset;border-bottom-right-radius: 20px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

           
【前端技术】 CSS3动画animation
02 02 2016
CSS3动画animation

CSS中的 animation 属性可以让很多其它CSS属性产生动画效果,比如color,background-color, height, width等。当然,你需要为每个动画定义@keyframes CSS规则,animation需要调用这些@keyframes产生动画效果,比如:在每个 @keyframes CSS规则里面,我们需要定义动画发生的阶段时间和变化样式。例如,0% 表示动画的开始阶段,100% 表示动画的结束时刻。animation属性里引用 keyframes 有一种简写方式,展开来一共有8个子属性,通过它们,我们可以控制各种的动画过程。animation-name: 指定一个 @keyframes 的名称,动画将要使用这个@keyframes定义。

           
【前端技术】 jquery利用scrollLoading实现图片延迟加载
01 02 2016
jquery利用scrollLoading实现图片延迟加载

经常会遇到一个页面的加载图片很多,用户一进去就要等待很久的时间,全部耗在了图片的加载中,用户体验很不好,解决办法就是利用图片的延迟加载,只显示屏幕之内的图片,屏幕之外的不加载,只有图片的区域进入了浏览器可视窗口范围,则触发图片的加载并显示,这样的做法有两个好处,1:提高页面的加载速度;2:节省了流量。1:在页面引入jquery库文件<script type= "text javascript " src= "http: static w3ceasy com 6138b12ebb649f31c3bf431718a4024d 6138b12ebb649f31c3bf431718a4024d gif ">< script>

           
【转载优文】 从网页制作到前端开发工程师难吗?
31 01 2016
从网页制作到前端开发工程师难吗?

招个前端开发工程师难吗?今天在CSDN上看了一个帖子,标题被我无耻的复制了“招个前端开发工程师难吗?”,然后给出了3k-6k的薪资。说实话,这个价位在北京最多招个网页制作,找个靠谱点的前端开发工程师确实不大容易。曾几何时,前端开发工程师也被称为切图工,以至于我们自己都不好意思说是网页制作,然后被一并归入了设计,连个具体点的职位都没有,吐槽一下,大家勿喷。这个价位在北京最多招个网页制作,找个靠谱点的前端开发工程师确实不大容易。曾几何时,前端开发工程师也被称为切

           
【前端技术】 css媒体查询之响应式网站
30 01 2016
css媒体查询之响应式网站

因为当今手机和平板的不断流行,使前端技术人员不得不考虑网站对于这些电子设备的展现效果。而传统的写法,貌似已经不适应了这种发展。于是出来一个新潮的词语“响应式”,实现响应式设计的主要途径是使用 CSS 媒体查询。其实从css2版本开始,就可以通过媒体类型在 CSS 中获得媒体支持。它可以将我们的网站,在不同的分辨率中而展示不同的布局样式。进而提高较好的用户体验。这篇文章,我就带着各位一起来探讨媒体查询的用法和效果吧。媒体查询规则@media all and (min-width: 800px) { ... } @media all 是媒体类型,也就是说,将此 CSS 应用于所有媒体类型

           
【框架学习】 前端工程师的神器框架—amazeui
27 01 2016
前端工程师的神器框架—amazeui

今天要探讨的是国内的一个前端框架Amaze UI。俗称“妹子UI”。它是一个专注于移动开发的前端框架。各种插件让工程师如鱼得水般爽快。并且支持兼顾国内主流浏览器及 App 内置浏览器。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果。如此优秀的框架,对于众多的前端攻城狮们来说,无疑是一个超大的福利!好,别的也不多讲了。我们一块来看下它的使用方式。

           
【前端技术】 关于国内免费空间分享
26 01 2016
关于国内免费空间分享

昨天因为有事情,所以没有更新文章。为了弥补下,今天给大家分享几个免费空间。算是个福利文章吧!说起来免费空间,其实国内很多免费的空间和二级或三级免费域名。我就说一些可以用的,按照劣优顺序发布下面。那些乱七八糟的就不跟大家说了。易网中国(http: www idccu com )首先说下这个是不支持绑定域名的。必须用他们的四级域名。还需要交个10块钱的押金。说是提供10G的月流量,但我感觉他们的信誉有点问题,我注册后基本上没用,月末访问的时候,系统提示流量已用完。配置就不说了,想用的可以自己去看。不太建议大家使用这个。网眼免费空间(http: www webcamcn com )

           
【前端技术】 JavaScript实现360度全景图片展示效果
26 01 2016
JavaScript实现360度全景图片展示效果

360全景照片展示由于它的真实性、全视角等特点能够很好的展现产品。而我在工作之余写了一个360度图片展示效果,改变了普通图片平淡的特点,让人们在网上能够进行 360 度全视角观察,而且通过交互操作,可以实现自由浏览,从而震撼的视觉效果。全景照片:所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分,并将成像效果最为接近的区域加以重合,以完成图片的自动拼接。现在的智能手机也基本带这个功能。这个小DEMO基于全景照片的左右边缘较为接近且适宜自动拼接与jser熟知的无缝滚动原理。下面这个图片就是

           
【前端技术】 jQ:odd 选择器 选择奇数元素
24 01 2016
jQ:odd 选择器 选择奇数元素

昨天和前天都在给大家讲解选择器的文章。今天再给大家普及一个选择器,这篇文章后,我想大家可能对选择某个元素肯定是得心应手了。这篇文章要讲的是jQuery :odd 选择器。可能有些同学见过它,它的应用还是比较常见的。如果没见过,也不用担心。下面我将系统的来讲解下它。它的定义:odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。index 值从 0 开始,所有第一个元素是偶数 (0)。最常见的用法:与其他元素 选择器一起使用,来选择指定的组中奇数序号的元素(如上面的例子)

           
【转载优文】 CSS3技巧:fit-content水平居中
24 01 2016
CSS3技巧:fit-content水平居中

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个CSS属性是用来水平居中的,fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。 在不设置宽度,并且元素中含用float:left情况下居中,先看一段代码:

           
【框架学习】 PHPCMS留言板guestbook插件功能
23 01 2016
PHPCMS留言板guestbook插件功能

很多朋友用PHPCMS开发网站的时候,发现PHPCMS官方仅提供了一个简单的表单的提交功能。对此很多小白朋友们真滴很痛苦啊,因为毕竟常见的网站上面,都会有一个留言区,提供站长和大家的一个交流。其实啊,做这块有一些特别省事的办法,百度 "畅言 "或者 "多说 "。这二个都是评论的一个插件。简单到和百度分享一样,一段JS代码,复制粘贴到你的网站想出现的地方,就可以实现整个功能,而且功能性很强大。想看评论或者回复,就登陆相对应的 "畅言 "或 "多说 "后台,即可回复留言。 如果你不想用这种方式的话,今天再给大家提供另外一种办法。希望可以帮助大家。废话不多说了,下面进入教程部分

           
【前端技术】 css选择器nth-child()的用法讲解
23 01 2016
css选择器nth-child()的用法讲解

今天来讲解css3的一个伪类选择器nth-child(),这个选择器的功能昨天文章的时候提到过。想必大家都感觉它很牛逼。你可以轻轻松松的选择html中的任何一个标签,然后进行定义样式。今天,我们就这个选择器,来详细的讲解下,以便大家以后更熟练的去操作的它。定义和用法nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。浏览器支持所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。

返回顶部