承接上一篇：【CSS3进阶】酷炫的3D旋转透视 。 最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开） 本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。 嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会） CSS3 3D 行星运转效果图 随机再截屏了一张： ...
??在网站用户经常需要注册新的账号以及对已经注册过的账号进行登录。??本文使用 php 实现基本功能并对基本原理进行讲解。 一. 注册（非 JSON） 1. HTML部分（register.html） ??首先完成 HTML 页面的基本布局 Register_Page 这里采用 post 方式 action 的对象为将要创建的 registerHandler.php 文件 2. php 部分（registerHandler.php） ??我们在 HTML 文件里得到了 user 和 pass 的两个值，并将他们...
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直都不知道他的变化规则.所以使用起来有点摸不着头脑.动画上的使用,也就没那么优先考虑. skew有两个属性: skewX,skewY.其实变化也就针对这两个值来操作. 首先我们来看,最基本的skew术语. 图中这个方形是一个BOX,skew的默认原点是盒子的中心点...
最近有个任务，做一个非常小的h5的应用，只有2屏，需要做横向的全屏滑动切换和一些简单的动画效果，之前做这种东西用的是fullpage.js和jquery，性能不是很好，于是就想自己动手弄一个简单的东西来实现。最后我用zepto + hammer.js 和轮播的方式解决了这个问题，效果还不错，整个页面不开启Gzip时所有资源请求的数据大小为200KB左右。这篇文章总结下这个方法的实现思路。 效果演示（代码下载）： 1. 实现要点 1）滑...
最近在研究 Retina 屏的适配问题，在具体方案讨论之前，陆续做了一些理解笔记，现归纳如下。具体方案的讨论将另作文章。 中的 viewport是布局视口 initial-scale等的缩放是基于理想视口的 理想视口由设备各自提供，理想视口的宽度也是设备的独立像素 所谓“独立”是说这个设备独立像素和像素密度无关 Retina屏增加了设备像素（物理像素），所以物理像素是有密度变化的 dpr = 物...
序言 这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章，是以色列开发人员塔利加希尔大量研究的成果。在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据，并花了很多时间来研读网络浏览器的源代码。她写道： 在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也做不了。但是现在，开放源代码的浏览器拥有了 过半的市场份额 ，因此，是时候来揭开神秘的面纱，一探网络浏览器的...
一、介绍浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、Chrome及Safari，Safari是部分开源的。根据W3C（World Wide Web Consortium万维网联盟）的浏览器统计数据，当前（2011年5月），Firefox、Safar...
HTML超出文本多行截取代码如下： HTML： 代码如下: 脚本之家 网址：http://www.gxlcms.com 脚本之家 网址：http://www.gxlcms.com CSS： 代码如下: .sytm-text-1 { color: #FFF; background: #000; width: 410px; height: 22px; } .sytm-text-2 { color: #FFF; background: #000; width: 410px; height: 44px; } p { line-height: 22px; } JS（引入jQuery）： 代码如下: $("div[class*=sytm-text]").each(function(e){ var...
代码如下: 打折后价格计算 function calculator(){ var prices=document.getElementById("price"); var discounts=document.getElementById("number"); var pay; var select=document.getElementById("payfunction"); if((prices.value>=0&&!isNaN(prices.value))&&(discounts.value>=0&&!isNaN(discounts.value))&&prices.value!=""&&discounts.value!="") { pay=prices.value*discounts.value; switch(parseInt(select.val...
实现思路： 1、需要有一个层将body遮住，放在body上方。 2、修改body的overflow属性值为：hidden 废话不多说了，将关键代码贴出来了，兼容火狐，谷歌，ie 遮罩层的样式代码，红色部分是关键的部分代码如下:.cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;z-index: 1002; left: 0px; display:none;opacity:0.5; -moz-opacity:0.5;} 网页部分的代码代码如下:点我显示遮...
[html] 你知道短链接的生成原理吗？ 目的将长度较长的链接压缩成较短的链接，并通过跳转的方式，将用户请求由短链接重定向到长链接上去1.二种方式生成短链hash-可能会重复发号器发号压缩 URL2.短链跳转方式301 - 用户第一次访问某个短链接后，如果服务器返回301状态码，则这个用户在后续多次访问统一短链接，浏览器会直接请求跳转地址，而不是短链接地址，这样一来服务器端就无法收到用户的请求缺点：有缓存情况下直接跳转原地址，...