尝试webapp框架模板制作,难点与心得

首次接触zepto.js,轻量的移动开发框架,类似JQuery,所以入门还是比较轻松的。选择学习zepto.js原因很简单,因为轻量简洁。 内部地址:webapp框架模板雏形 项目地址:https://github.com/coolhihi/trywebapp 难点 衰减曲线函数 我观察了安卓APP里的下拉刷新,属于衰 Read»

webapp框架模板雏形

简介 我的想法是沿用PC站前端框架的设计思路,通过AJAX加载新页面内容,利用JS结合HTML5/CSS3特性制作类似AndroidAPP的效果,包括: 下拉刷新 新页面多方向切入 上拉加载更多 消息推送 用到zepto.js 项目地址: https://github.com/coolhihi/trywebapp d Read»

编写一套前端框架,基于jQuery,笔记及心得

这段时间一直在忙某平台的前端改版,目前已调试得比较满意,这个时间,把思路和难点做一下整理,巩固一些知识点。 思路 为节省网络资源,JQuery及用到的插件、公共函数、公共动作监听(采用delegate),均只在首次打开时加载; 定义load方法和reload方法,通过ajax方式实现无闪烁更换内容和伪刷新; 监听所有a Read»

让input框实现类似百度的搜索提示

挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求,发现还真找不到。html5的<datalist>方便但不实用,且兼容性是大问题,于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的封装。 需求: 实现带提示的input框,类 Read»

页面加载后,对不合比例的图片自动进行缩放和裁剪处理,基于jQuery

其实很早就想写一个这样的效果,至于原因?进来这个笔记,我相信你懂的。 一般门户网站,缺少不了大量的图片展示,而为了网站美观,图片又有各种不同尺寸,专业的网站编辑人员,会把图片处理成等比例的图片再上传,把网站弄得很好看,可惜,我想说,我遇到90%的网站编辑人员都是不专业的。 为了不让网站编辑人员毁掉我的心血,我决定做这样 Read»

让ie支持placeholder属性的代码,兼容IE各版本

让IE支持placeholder属性,亲测兼容IE各版本,但不支持密码框。 下面代码,$(document).ready你懂的,如果不用jquery,请使用onload或直接引用,方便。 $(document).ready( function(){var doc=document,inputs=doc.getE Read»

让ie6正确处理hover样式,支持所有标签,原始ie6只支持a标签的hover样式

ie6只支持a标签的hover样式,这么方便的hover怎能因为IE6而不用。 解决办法挺简单: 下载 ie6hover.htc ,放在跟css文件同目录下; 参考如下代码定义body样式: body{_behavior:url(ie6hover.htc);} 亲测ie6可正确处理hover样式了。 参考:http: Read»

webkit内核浏览器不支持小于12px的字号的解决办法,chrome,傲游,360极速浏览器

webkit内核浏览器默认不支持小于 12px 的字号,即定义font-size小于12px时无效,只需修改 -webkit-text-size-adjust 样式为 none 即可。 参考代码: body{-webkit-text-size-adjust:none;} Read»

关于 CSS3 的理解,常用样式扎记,变形,转换,动画的实现方法

更好的教程:W3School 常用样式: 圆角(border-radius) /* 四个角同时进行半径为10px的圆角处理 */ .demo01{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10 Read»

让LI横向排列且对于容器居中的方法

ul的CSS设置display:block;text-align:center,然后固定宽度,即成为一个文字居中的容器; li的CSS设置display:inline,即可实现li的居中横排。 如果li有宽度要求,则需要设置display:inline-block。 例子: <!DOCTYPE html PUB Read»