Image.onload在IE下无法获取宽高的问题

no comments , Tagged : ,

今天在IE下想在onload事件获取img的宽高，但一直取不到值，就在网上搜索了一下，原来又是和顺序有关，XXX。我们先来看下面这个例子：

var img = new Image();
img.src = "test.gif";
img.onload = function(){
  alert ( img.width );
};

单纯这样看，并没不会觉得有什么问题。但在IE中存在BUG，第一次打开页面时还正常，之后就没反应了，怎么刷新也无效，这是因为图片已经被缓存在本地了。

var img = new Image();
img.onload = function(){
  alert ( img.width );
};
img.src = "test.gif";

我们现在改成上面这样，问题就解决了。我们还可以通过img.complete先来判断是否已缓存在本地，如果是那就不用用onload去获取了

要注意的是在IE6下，GIF含有多帧的图片会多次加载，所以在onload事件里，记得要把img.onload设置为null

用css3实现高光渐变边线

no comments , Tagged : ,

皮肤终于搞定，每年春节左右都会换新皮肤，因为这博客也是在09年春节前不久开通的。去年换了两次皮肤，所以今年拖到这段时间才在再制作。这次与之前的皮肤差不多，算是前两个皮肤的合体吧。本来打算用亮点的颜色，但颜色配得不好，也不喜欢，最后还是用回了这种暗暗的色调。依然屏蔽所有IE（IE9还是有点小杯具，所以一样屏蔽）与FF2，测试浏览器chromium12、Firefox 4、Safari 5、Opera 11。

好了，下面进入正题，实现方法与box-shadow原理一样，所以没看过的请先看一下。

我们就直接拿头部的导航来举例说明。因为只有FF才支持border的渐变而且只能是自内向外或者内外向内，所以用border去处理是不靠谱的。背景就可以渐变，所以我们利用背景来作边框的渐变。首先看下面这段样式：

#header .page_item:before{ position:absolute; left:-1px; top:0; width:87px; height:55px; background:-webkit-gradient(linear,0 0,0 100%,from(#1f1f1f),to(#333));background:-moz-linear-gradient(top,#1f1f1f,#333);background:-o-linear-gradient(top,#1f1f1f,#333); content:''; z-index:-1;}

同样是用绝对定位加z-index:-1，记住content属性很重要。但在实际应用中，可能会发现看不到效果，那是因为被有设置背景的父级元素给遮挡了，所以只能视情况把某个父级元素也设置为绝对定位，例如这皮肤，我是对下面这个设置的：

#header nav{ position:absolute; top:0; left:200px; width:510px; text-align:right; z-index:999}

其实用这方法也挺无奈的，而且不是什么布局都能这样弄。不过要提醒的是，上面是针对双边线高光渐变，如果你是单边线，直接用1px宽或高分别放到需要的位置既可

iphone、ipad Web开发小技巧(知识)

6 comments , Tagged : ,

iphone、ipad都水果家的，区别也不是很大(别和我提屏幕!!!)，所以放一起不作过多区分，基本都通用。资料都网上收集来的，很多我也还没条件测试，可能有些知识点已经更新了。

如何隐藏iPhone Safari的地址栏

使用meta标签，看一些资料说的，不过我在iphone4下测试没反应，不清楚iphone3是否有效或者是有什么限制。

<meta name="apple-mobile-web-app-capable" content="yes" />

第二个方法就是通过JS处理。原理就是当我们往下滚动时，地址栏会往上收起，所以我们重围一下默认位置就可以了。也因为是使用系统自身的特性，当内容小于可视区域时(没有滚动条)，地址栏是不能隐藏的。

window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}

不同的方向对应不同的样式表

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
</link><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</link>
Read More…

CSS系列之”box-shadow “(阴影)

1 comment , Tagged : , ,

使用CSS3里的box-shadow属性，我们就可以不使用图片(或额外的标签)来制作阴影效果了(费话，地球人都知道)！！不过单纯给标签定义box-shadow，可能不能完全符合我们的需要，这时伪类就派上用场了(原来这东西还可以这样用)，我们可以使用:befor、:after伪类来处理一些特殊的阴影效果。

.drop-shadow {
   position:relative;  /* 给伪类定位作准备*/
   width:90%;
   height:80px;
   line-height:80px;
   background:#fff;
   border:2px solid #ddd;
   text-align:center;
}
 
.type-1:before,
.type-1:after {
   content:"";  /* 这个是必须的 */
   position:absolute;  /* 绝对定位，调整阴影位置 */
   z-index:-1;  /* 使阴影置于最低层 */
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;  /* 这个看情况设置 */
   /* 加阴影，没什么特别 */
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   /* 旋转阴影，同样没什么特别*/
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}
/* 实现右边的阴影效果，其实还是旋转加定位-_- */
.type-1:after{
   right:10px;
   left:auto; 
   -webkit-transform:rotate(3deg); 
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
}
Read More…

未来半年计划

2 comments , Tagged :

去年底正式加入前端攻城师的行列，还是我很希望的无线方向。进公司后一直在忙天翼阅读WAP版项目，通过这项目算是了解了一些无线前端的基本知识吧，CSS3部分新功能使用的比较多，HTML5就没怎么用上，接下来的项目会多尝试一下。

做无线前端还是比较舒服的，只需要考虑webkit内核，不用对着那烦人的IE。CSS3也用得挺爽的，不过就目前而言android系统还是参差不齐，性能较iphone差不少，所以一些动画效果还是能不用就不用。

暂时还没太多无线开发方面的技术分享，要学的东西还很多，就简单写下未来半年的计划（计划赶不上变化，所以我也不扯太远）

Read More…