css3实现iPhone滑动解锁

该效果的主要实现思路是给文字添加渐变的背景,然后对背景进行裁剪,按文字裁剪(目前只有webkit内核浏览器支持该属性),最后给背景添加动画,即改变背景的位置,背景动画效果如下(GIF录制时有卡顿,代码实现时不卡):最终效果:全部代码如下:!DOCTYPEhtml html head style p{ width:50%; margin:0auto; lin...
iphone滑动解锁 css3

HTML5存储

数据存储是每一个站点必不可少的功能,在HTML5之前通过cookie可以实现本地数据存储。但是cookie只能存储4kb的数据,并且cookie是随http请求一起发送到服务端,这必然浪费了带宽。Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,Web Storage官方建议为每个网站5MB,每...
html5存储 HTML5

html5之touch事件

前言一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲。例如我们常用的 click事件 ,在触屏设备下是如此无力。手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互式网站,触摸事件是相当重要的。Apple在iOS 2.0中引入了 触摸事件API ,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一 触摸事件规范 。规范这里我们介绍...
html5 touch事件 html5 触摸事件

HTML5-流星雨

1、新增流星雨对象//流星 varMeteorRain=function(){ this.x=-1; this.y=-1; this.length=-1;//长度 this.angle=30;//倾斜角度 this.width=-1;//宽度 this.height=-1;//高度 this.speed=1;//速度 this.offset_x=-1;//横轴移动偏移量 thi...
流星雨 html5

图片迟加载

图片迟加载即当滚动条向下滚动时,只有在视口内的图片才加载,其他图片则不加载。可以先把图片的url地址,保存在img的一个自定义属性中,然后给图片起个类名lazy,当滚动条滚动时,把类名为lazy的图片push到一个数组中,然后循环遍历该数组,并判断图片是否在视口内,若在则将该图片的src设为自定义属性的值,并将类名设为nolazy。!DOCTYPEhtml html head metacha...
图片延迟加载 图片预加载

10个CSS3中的隐藏特性

概述:W3C正不断致力于为设计师、开发人员和用户开发新的CSS特性,最新的CSS3为web设计增添了许多令人惊叹的特性,下面我们就来看看你可能不知道的CSS3中的10个隐藏特性.CSS3为web设计增添了许多令人惊叹的特性,这其中你经常会用到box-shadow(图层阴影),border-radius(边框圆角),transform(变形)这一类受欢迎的常用特性。但是还有一些强大的功能,你可能没有...
CSS

响应式设计的性能优化

2010年,Ethan Marcotte 提出了「 响应式网页设计 」(Responsive Web Design),通过 Media Query 和 Fluid Layout 判断屏幕宽度,自行调整布局.一般,在页面头部加入 viewport 标签 metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=...
响应式设计 前段开发

CSS—选择符

CSS通过选择符来选择某个对象,并对其进行修饰。选择符的类别很多,我们究竟应该在编写程序时如何筛选,我之前在这里列举了几条基本需要注意的事项。 元素选择符 作用的范围是html标记 a{……}div{……}p{……}类选择符 可以作用于一个或多个元素,使得这些元素有相同的样式。 .red{……}.blink{……}.but1{……}使用前提,需要为html元素进行标记class属性 a class...
选择符 CSS

事件冒泡的一些应用_利用事件冒泡处理多个事件

在做项目时,有这样一个需求,需要点击Input显示隐藏下拉面板,从中选择内容填充入文本框。最开始思路:(1)文本框与下拉面板作为一个整体,整体失去焦点后,隐藏下拉面板,不可行;(2)文本框正拥有焦点,此时点击面板,尝试先触发面板的点击事件再通过文本框的失去焦点事件以上思路最终均不可行,原因:(1)div没有获取焦点之说,何来失去焦点;(2)文本框触发焦点事件总是会先执行,面板隐藏后无法再触发其点击...
冒泡事件

html 标签: image也能提交form!!!

html 标签: image也能提交form!!!image也能提交form先前经常使用“ input type=submit value=input_submit/ ” 来提交form今天在项目中进行开发的过程中有这么一个功能:点击“XXX”按钮,进行form表单的提交,但是这个提交按钮是一个type=image 的input;找了半天也没看到这个图片元素绑定的js提交表单的相关信息。后来向度娘...
image form html标签