03 2014 档案
摘要:1.IE6双倍边距bug当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。2.3像素问题及解决办法当浮动元素与非浮动元素相邻(注意这里的相邻可以是纵向的也可以是横向的)时,这个3像素的Bug就会出现,它会偏移3像素。实际表现就是两个元素之间产生了一道缝隙!解决方法很简单,将两个元素都浮动就OK了。此BUG深层的原因是非浮动元素的layout未触发,所以这里只要是能够触发layout的cs
阅读全文
摘要:兼容IE6/IE7/IE8/火狐---下拉菜单select高度 总结:用外部的DIV来实现高度 边框的兼容,缺点用到大量的hack,作为最后没有办法的选择
阅读全文
摘要:1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码;2、HTML5标签的使用在开始编写webapp时,哥建议前端工程师使用HTML5,而放弃HTML
阅读全文
摘要:this在js中的地位可以说是相当高了,本文介绍下this的基本相关情况,以后还会慢慢介绍在页面中aler(this)//this的指向是window在DOM操作中this的指向是当前发生事件的对象window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ var oDiv=this.getElementsByT...
阅读全文
摘要:Modernizr——为HTML5和CSS3而生!Tags :HTML5CSS3译文JS03-10 / 20110 comments原文地址:http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/堂主译文地址:http://www.osmn00.com/translation/221.html转载请尊重原作者及译者劳动,附带以上信息,谢谢合作~-------------------- 分割线,以下是正文 --------------------10年前,只有最尖端的网站设计师会为
阅读全文
摘要:众所周知用html5新增标签布局不光可以使页面更具有可读性,也能使代码更清晰规范,但是兼容性成为了首要的问题,如何解决也是问题的关键。【兼容HTML5方案】百度贴吧,百度图片的实现:腾讯ISUX研究院的实现: 淘宝-我的淘宝页实现和腾讯一样,只不过是不同版本:不得不提的一个插件https://github.com/aFarkas/html5shiv在github上达到了3453星的高度,获得了国内外的广泛认可,如果你厌烦了满页面的div想尽早拥抱HTML5元素,就使用它吧。【兼容模式的选择】百度首页使用的是:百度搜索页使用的是:百度图片,腾讯ISUX研究院,淘宝收藏页使用的是:X-UA-Com
阅读全文
摘要:在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标eve
阅读全文
摘要:function ajax(url, fnSucc, fnFaild){ //1.创建 if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest(); } else { var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); } //2.连接 oAjax.open('GET', url, true); //3.发送 oAjax.send(); //4.接收 oAjax...
阅读全文
摘要:通过上一个基础篇我们知道插件的格式,这次我来写一个tab插件$(function() { $.fn.插件名称 = function(options) { var defaults = { Event : "click", //触发响应事件 ...
阅读全文
摘要:原生Javascript写法:Jquery写法:$(document).ready(function(){$("按下回车的控件").keydown(function(e){var curKey = e.which;if(curKey == 13){$("#回车事件按钮控件").click();return false;}});});
阅读全文
摘要:1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:/* 半透明的遮罩层 */#overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* 此处的图...
阅读全文
摘要:var Client = { viewportWidth: function() { return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth); }, viewportHeight: function() { return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight); }, viewportSize: function() { re
阅读全文
摘要:面试80%会被问到的问题Array.prototype.delRepeat = function () { var newArray = []; var provisionalTable = {}; for (var i = 0, item; (item = this[i]) != null; i++) { if (!provisionalTable[item]) { newArray.push(item); provisionalTable[item] = true; } } ret...
阅读全文
摘要:这里首先给出JSON字符串集,字符串集如下:var data="{root:[{name:'1',value:'0'},{name:'6101',value:'西安市'},{name:'6102',value:'铜川市'},{name:'6103',value:'宝鸡市'},{name:'6104',value:'咸阳市'},{name:'6105',value:'渭南市'},{name:
阅读全文
摘要:这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下一、ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂;自己结合了一些书籍内容,总结一下。先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如
阅读全文
摘要:HTML5LocalStorage本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示:最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。userData是IE的东西,垃圾。现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用。再之后Google推出了Gears,虽然没有限制,但不爽的地方就是要装额外的插件(没具体
阅读全文
摘要:each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法each处理一维数组varar...
阅读全文
摘要:说到居中的问题,或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确,这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢?我们先来温习一下这些个属性值的用处。 text-align:center; 行内元素的水平居中显示; margin:0 auto; 固宽盒子在浏览器中的居中显示效果; vertical-align:middle; 行内元素的垂直居中显示; line-height:height; 针对...
阅读全文