Silentash

尘埃默默，风雨洗礼--关注前端开发技术

一只蝉告诉我的

Jun28th

发布:米克 | 分类:其他 | 评论:0 | 浏览:
两三天前的深夜，我在路上拾到一只还未蜕皮的幼蝉，带回家在一个小盒子里放着，我没有给它任何吃的东西（也不知道怎么给），心想它第二天会不会死掉。如果它挂了我就把它做成标本。
第二天发现它已经成功蜕皮，在空壳的旁边一动不动，我以为它终于饿不住，挂掉了。于是便用手去碰它，它爬了一小步，告诉我它还活着。
连着两天都是这样，它一动不动的趴着，好像在原地等死。我知道蝉的生命很短，活不过几天，如果它不能飞出我的房间，就相当于提前宣布了自己的死亡……
查看全文 | 发表评论
Tags: 蝉  生活  勇气  人生  

Javascript 匿名函数及其代码模式原理

Jun27th

发布:米克 | 分类:JS/Ajax/AS/Flex | 评论:0 | 浏览:
关于什么是匿名函数，及它带来的优势在本文就不深究了，先抛出一个常用的匿名函数：

(function(){alert('yo');})();

很多同学知道怎么用这种匿名函数，却或许并不明白为什么这样写就能够调用匿名函数。也许知道后面的圆括号是执行前面的函数，而并不清楚前面的圆括号具有何种含义！本文将带你了解匿名函数的代码模式原理……
查看全文 | 发表评论
Tags: javascript  匿名函数  语法  前端  

按钮样式的NICE写法

Jun24th

发布:米克 | 分类:XHTML/CSS | 评论:1 | 浏览:
前端开发经常会从视觉设计师那里拿到比较 BT 的按钮设计效果，比较极端的就如渐变圆角自适应按钮！拿到手之后你可能会恨啊，狠归恨，工作还是得做，也许你会采用 A 标签嵌套 SPAN 标签的方法模拟一个按钮，但更极端的情况下，比如 FORM 中的按钮，不管从使用及语义讲，用非按钮标签实现都不是很妥当的。

下面就介绍一个比较实用的按钮结构的写法，是从白社会那里 KIA 来到哦，我个人觉得做的很 NICE ，SO!好东西就拿出来和大家分享：

 <span class="btn"><span><button type="submit">确定</button></span></span>

很简单的代码吧^_^!
查看全文 | 发表评论
Tags: 按钮  css  前端  

Javascript 鼠标拖选示例

May25th

发布:米克 | 分类:JS/Ajax/AS/Flex | 评论:2 | 浏览:
尝试用面向对象的思想来写这个鼠标拖选的 DEMO 。
主要在于创建选取框和对象列表，遍历出在选框内地对象并获取，对获取的对象还可以再做进一步处理，比如加上群体拖动等效果。
演示页面：Javascript 鼠标拖选 Demo

查看全文 | 发表评论
Tags: javascript  鼠标事件  鼠标拖选  脚本  前端  教程  

又见万恶的注释bug

May4th

发布:米克 | 分类:IE/WIN浏览器BUG | 评论:1 | 浏览:
之前有讲过 IE6 下多余的注释会引起浮动容器的字符复制BUG。根据这个原理，解决了不少相似的问题，不过今天碰到的却让我人很头疼，原因是这次出问题的是iframe。

废话不多讲，直接看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:600px;border:10px solid #000">
<div  style="float:left;width:100%;background-color:#f0f0f0;height:500px;">
</div>
<!--罪魁祸首一-->
<!--罪魁祸首二-->
<div  style="float:left;width:230px;margin-left:-240px;border:5px solid #36C;">
<div style="border:3px solid #ccc;height:100px;background-color:#f1f1f1;"><br /><br />正常的div容器一</div>
<iframe style="width:200px;border:5px solid #ddd" frameborder="0"></iframe>
</div>  
</div>
</body>
</html>

查看全文 | 发表评论
Tags: IE  BUG  注释  iframe  

善用 cloneNode 存储 DOM 对象

Apr28th

发布:米克 | 分类:JS/Ajax/AS/Flex | 评论:2 | 浏览:
获取DOM节点的方法有很多，如常用的getElementById()、getElementsByTagName()，前者返回一个节点元素，后者返回的是节点的集合。看似相同，实际上其中大有文章：
1、getElementById()
返回的节点可以保存到变量中，即便使用removeChild()方法移除，也能再通过保存的变量使用该节点。
测试下面的代码：

<div id="test">hello world</div>
<script type="text/javascript">
  (function(){
    var oDiv = document.getElementById('test');
    document.body.removeChild(oDiv);
    alert(oDiv.innerHTML);//hello world
  })()
</script>


2、getElementsByTagName()
返回的值仅仅是对DOM节点地址的引用，如果使用removeChild()删除节点，返回值是会变化的。可能用图示更清晰吧

测试下面的代码加深印象：

<ul id="test">
  <li>hello world</li>
  <li>hello world2</li>
</ul>
<script type="text/javascript">
  (function(){
    var oDiv = document.getElementById('test'),oLi = document.getElementsByTagName('LI');
    oDiv.removeChild(oLi[0]);
    alert(oLi[0].innerHTML);//期望的是hello world,实际上输出的是hello world2
  })()
</script>

查看全文 | 发表评论
Tags: dom  cloneNode  javascript  前端  

DOM操作的性能优化

Apr25th

发布:米克 | 分类:JS/Ajax/AS/Flex | 评论:6 | 浏览:
我们都知道，DOM操作的效率是很低的，尤其是用JS操作DOM的时候，性能的优劣更是引发问题和争论的焦点。
这里我们先分析一个很简单的例子：

<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
...
</ul>

假设我们要对上面的1000个或者更多的 li 元素进行抽样显示（隐藏）的控制，照常理来讲，我们会习惯性地去遍历这些元素，加上相应class，或者直接写上内联样式。至少在我看来这是最简单最高效的操作。然而 试验 结果却出乎我的意料，IE和firefox的显示结果都出奇的慢，去网上找了答案：这其实和文档的回流(reflow)很有关系，Nicholas总结了引起reflow的一些因素，其结论就是：
  1. 当对DOM节点执行新增或者删除操作时。
  2. 动态设置一个样式时（比如element.style.width="10px"）。
  3. 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。
...
查看全文 | 发表评论
Tags: dom  script  优化  fragment  reflow  前端  教程  

小技巧：FF 图片 ALT 属性溢出隐藏

Apr19th

发布:米克 | 分类:XHTML/CSS | 评论:1 | 浏览:
浏览器处理错误源图片时会有不同表现:
不说废话了，比如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.eximg{
border:1px solid #f00;/*加上边框让问题更清晰*/
}
</style>
</head>
<body>
<img class="eximg" src="../nothing.jpg" width="50" height="50" alt="nothingisimposible" />
</body>
</html>

假设图片不存在，火狐不会像IE一样显示叉叉，而是用alt中的文字完全代替图片的位置。如果我们对图片的尺寸有要求（假设50高50宽），这时候alt属性就会撑开这个宽度或者高度，破坏整体布局。
另：去掉DOCTYPE之后，火狐也能像IE一样，加上DOCTYPE反而不一致了，不知道是火狐刻意还是疏忽。
一个小技巧可以修复这种问题，简单的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.hidealt{
    border:1px solid #f00;
    height:50px;
    width:50px;
    overflow:hidden;/*溢出隐藏*/
    display:inline-block;/*修改图片默认的Inline特性*/
}
</style>
</head>
<body>
<img class="hidealt" src="../nothing.jpg" width="50" height="50" alt="nothingisimposible" />
</body>
</html>

查看全文 | 发表评论
Tags: ALT  溢出  FF  技巧  

Margin 折叠( collapsing margins )

Mar24th

发布:米克 | 分类:XHTML/CSS | 评论:3 | 浏览:
貌似有点火星了，前几天朋友找我抓个错误，HTML 结构很简单，我模拟一下^_^

<div class="wrap">
  <div class="content">
    1111
  </div>
  </div>

CSS 样式也很简单，我再模拟一下o(∩_∩)o...

  body{
    background:#000;
    margin:0;
    padding:0;
  }
  .wrap{
    height:300px;
    background:#f1f1f1;
  }
  .content{
    height:50px;
    background:#36c;
    margin-top:100px;
  }

本意是要让content和wrap之间有100像素的外边距，HTML 结构和 CSS 貌似都完美的呈现了这个结果。 然而在FF里却完全不是这么回事:示例

查看全文 | 发表评论
Tags: 浏览器  兼容  标准  collapsing  margin  前端  

Drop ie6,豆瓣率先抵制 IE？

Mar5th

发布:米克 | 分类:WEB标准 | 评论:3 | 浏览:
发现豆瓣的头像裁切组件在 IE 下报错，换了 Chrome 才搞定。希望这是他们有意在抵制 IE！o(∩_∩)o...哈哈。正好想起了前辈们正在进行的一项计划，如果你也有一样的想法，就一起参与吧！！！
Drop ie6

让我们一起来抵制 IE 吧，Oh,应该是 IE6,为拯救前端开发工程师的生命，请放弃 IE6！
Twitter:http://twitter.com/dropie6
Website:http://dropie6.org/
查看全文 | 发表评论
Tags: javascript  兼容  IE  豆瓣  dropie6  
分页:«1234567891011121314»

自我介绍

听海米克，外号三丰，从事前端开发工作多时，坚信由内而外的美才是前端开发的最高境界！

  • 丰富的学识 26/80
  • 丰收年年 0/1
  • 丰满的身躯 0/1 浮云

日历

<< 2009-6 >>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

朋友的窝

我的好友圈

我的动态

米克米克

我推荐的书

文章搜索

Powered By Z-Blog 1.8 Spirit Build 80722 Skined by 米克

Auto Publisher Copyright 2008 silentash.com All Rights Reserved.

浙ICP备09002459号