随笔分类 -  前端开发

iscroll.js 用法介绍
摘要：概要iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用）提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力度还不是特别好），Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。除了以前版本的iScroll的特性以外，i 阅读全文
posted @ 2012-10-17 11:34 亡魂 阅读(26131) 评论(1) 推荐(0)
认识hasLayout——IE浏览器css bug的一大罪恶根源
摘要：什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。下列元素默认 hasLayout=true<table> <td> <body> <img> <hr> <input> < 阅读全文
posted @ 2012-10-15 13:13 亡魂 阅读(174) 评论(0) 推荐(0)
javascript兼容性汇总(IE/FF)
摘要：.以下以IE代替InternetExplorer，以MF/FF代替MozzilaFirefox(1)window.event IE：有window.event对象 FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)(2)鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。(3)鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.o... 阅读全文
posted @ 2012-09-17 15:46 亡魂 阅读(228) 评论(0) 推荐(0)
前端开发中Cookie那些事儿
摘要：最近在开发过程中，和cookie打了很多交道，so有以下言论前段时间做了项目，在前端实现中频繁的操作cookie，记录几点供大家参考！cookie操作在前端开发过程中经常遇到，当然如果只是用来存储一些简单用户数据，还是比较简单的，我们要做的可能只是设置cookie名，值，过期时间等，读取也只要根据cookie的名读取相应的cookie值就可以了。在复杂的应用中，光这些肯定就不够了。cookie的属性除了name（名）和value（值），cookie还有以下一些可选属性，用来控制cookie的有效期，作用域，安全性等：expires属性指定了cookie的生存期，默认情况下cookie是暂时存在 阅读全文
posted @ 2012-09-05 15:27 亡魂 阅读(602) 评论(0) 推荐(0)
CS001: 清理浮动的几种方法以及对应规范说明
摘要：浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。我们将现有已知的清楚浮动元素方法罗列下：采用一个HTML标签，以及css的clear属性，来手工清理浮动；采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；采用CSS overflow 非 visible 值(overflow:auto/ov 阅读全文
posted @ 2012-08-03 11:01 亡魂 阅读(239) 评论(0) 推荐(0)
margin负值 – 一个秘密武器
摘要：CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 你知道margin负值的秘密武器吗？我们一起看看吧！1、带竖线分隔的横向列表（例如：网站底部栏目）传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线，然后通过margin-left：-1px隐藏掉第一个列表项的边框，父元素设置 overflow：hidden 来隐藏溢出部分，这样完美达到首尾无分割线的要求。2012-5-4 更新实际测试中发现 iphone safari 设置margin负值=border-w 阅读全文
posted @ 2012-08-03 10:59 亡魂 阅读(1187) 评论(0) 推荐(1)
从微博的改版谈网页重构——bigpipe中的页面构建优化
摘要：题记：搞互联网的同学也许都知道一个数字——4秒，有研究表明，如果一个网站没有在4秒之内加载完成，用户就会感到焦躁不愉快，并离开这个网站（数据来自性能测试网站http://gtmetrix.com/）。网站的内容、SEO优化、用户体验？哪个更重要呢？在速度面前，也许这些都相对更次要。所以提高网页效率，是我们在新版微博的第一目标。从四个方面来浅谈我们新版微博的优化。一、HTTP请求数的权衡1、为什么要关心http请求？当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初，包括等待时间、请求时间、建立响应时间、渲染时间……，都是消耗在前端的。比如下载 阅读全文
posted @ 2012-08-01 14:07 亡魂 阅读(215) 评论(0) 推荐(0)
腾讯的面试题
摘要：有一组数字，从1到n，从中减少了3个数，顺序也被打乱，放在一个n-3的数组里请找出丢失的数字，最好能有程序，最好算法比较快假设n=10000老题了，答一下 // 生成命题数组 function supplyRandomArray(){ var arr = [], n = 10000; for (var i = 0; i < n; i++) { arr.push(i + 1); } var num1 = arr.splice(Math.floor(Math.ra... 阅读全文
posted @ 2012-07-27 13:11 亡魂 阅读(194) 评论(0) 推荐(0)
js 点击文字可编辑 离开保存 jQuery
摘要：最近工作中有这么个需求。点击文字可编辑，离开保存，于是研究了下。代码如下html<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可以编辑的表格</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min 阅读全文
posted @ 2012-07-20 15:38 亡魂 阅读(6049) 评论(1) 推荐(0)
自定义图片热区
摘要：前阵子接到个需求，联通网上营业厅经常需要专题页面做宣传，但是由于专题页面会有按钮，以及各个图片的链接，省分的人没有html基础，没人维护，量又比较大，需要开发出一个可自定义图片热区链接的后台，于是就有了这个。现在整理下发出来，希望大家共同学习吧先看效果图：用了jquery.image-maps.js这个插件原理是：通过拖动计算出当前热区可移动模块的left top right bottom对应area的 coords 属性集成上面的位置，就可以实现热区了。对应的模块代码是：<!--模块展示 begin--><div class="modeShow"> 阅读全文
posted @ 2012-07-20 10:37 亡魂 阅读(3976) 评论(6) 推荐(2)
关于css强制换行(各种语言)
摘要：强制不换行div{white-space:nowrap;}自动换行div{word-wrap: break-word;word-break: normal;}强制英文单词断行div{word-break:break-all;}============================================CSS设置不转行:overflow:hidden 隐藏 white-space：normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象设置强行换行 word-break: normal ; 依照亚洲... 阅读全文
posted @ 2012-07-19 18:16 亡魂 阅读(321) 评论(0) 推荐(0)
IE6 PNG透明终极解决方案
摘要：方案1 - 滤镜解决方案： 介绍：滤镜从IE4.0被微软正式引入，所以我们可以使用滤镜解决IE6的PNG透明问题，滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意：此方法在部分版本的IETest中无效，建议使用标准的IE6来进行测试！目录说明：思路： 1、书写正常的CSS代码，通过background导入图片，这样所有的浏览器均使用了此PNG图片；background:url(../images/W3CfunsLogo.png); 2、通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，语法如下：filter:progid:DXImageT.. 阅读全文
posted @ 2012-03-29 11:29 亡魂 阅读(6795) 评论(1) 推荐(1)
简单高效的js搜索高亮
摘要：一、效果抢鲜展示此插件是我今天下午写的，为了直观地看到是个什么东东，先展示效果，您可以狠狠地点击这里：搜索页面文字jQuery插件Demo下图为Demo页面的两个测试截图 – 测试页面HTML代码取自豆瓣网帮助页面：下载 您可以狠狠地点击这里：jquery.textSearch-1.0.js 文件较小，功能简单，恕不打包~~二、功能简述从上图也应该看出来了，就是对HTML页面上的文字内容进行高亮标记，这个可以用在内容搜索上。纯粹的客户端程序，与后台一点瓜葛都没有。三、如何使用使用方法是textSearch，具体为：$(选择器). textSearch(String,可选参数)。例如，$(&qu 阅读全文
posted @ 2012-03-29 10:56 亡魂 阅读(1611) 评论(0) 推荐(1)

返回顶部