易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

效果不错的首页大banner展示

Submitted by gouki on 2009, September 8, 10:10 PM

看看这个效果如何？http://www.cssrain.cn/demo/webDemo/index.html，说老实话，我第一次看到的时候，真的以为是flash的。它的作者是不羁虫，用他的话来说是：

个人介绍

从事IT3年左右，专业前端工作2年左右，熟悉前端体验，Web标准（大侠很多，不敢自言精通），对jQuery的认识不到一年，jq很符合前端开发的习惯，努力学习中，也正是因为jquery认识了cssrain，这里的文章和插件都很不错，非常骄傲国内能有这样熬的交流的地方。

核心代码如下：

JavaScript代码

/*调用区域*/
$(document).ready(function(){
var pos=new Array();
pos=['585px','24px','88px','25px'];
var stepIndex=0;
var clickKey=0;
var now,next,clickIndex,startRun;
window.stepRun=function () {
now=stepIndex;
if(clickKey==1){
next = stepIndex = clickIndex;
clickKey=0;
startRun = setInterval("stepRun()",8000);
}else if (stepIndex<pos.length-1) {
next = stepIndex+1;
stepIndex++;
}else{next = stepIndex = 0;}
//alert(clickKey);
$('#bNav').animate({height:0},1000,function () {
$('#bannerSlider img').eq(now).fadeOut(2000);
$('#bannerSlider img').eq(next).fadeIn(2000);
$('#bNav li').eq(now).removeClass('now');
$('#maskBg_1').animate({left:'220px',width:0},1000)
.animate({left:pos[next],width:'264px'},1000,function (){
$('#bNav li').eq(next).addClass('now');
$('#bNav').attr('className','bNav_'+next+'').animate({height:'300px'},1000);
});
});
}
startRun = setInterval("stepRun()",8000);
$('#bNav a').click(function (){
clickIndex=$('#bNav a').index($(this));
clearInterval(startRun);
clickKey=1;
stepRun();
return false;
});
});

不过，尽量是从这里下载：http://www.cssrain.cn/demo/webDemo/webDemo.rar

Tags: jquery, banner

Javascript | 评论:0 | 阅读:21941

圆角？抱歉，你的浏览器不支持。请升级以获得更好体验。

Submitted by gouki on 2009, August 23, 9:32 PM

shawphy说到：圆角？抱歉，你的浏览器不支持。请升级以获得更好体验。
为此，他写了一篇博客，当然也有人有不同意见。所以有就有了这样的回复，当然他的回复不是为了针对内容的：

糖伴西红柿 on 八 23, 2009

确实为了低级浏览器的不兼容问题，要做出很多不必要的工作，投入和产出比暂且不说。面对那一堆毫无意义的标签就很让人烦恼了，对追求简洁高效代码的人来说，这简直无法忍受。不过真的能通过沟通来解决这个问题吗？首先，那么完善的沟通应该堪称完美，其所需要的条件，尤其是对老板的要求，感觉会比多谢几个多余的标签简单不到哪里去。如果老板们真的这么善于接受建议，他们就不是老板了。其二，就算老板接受了又如何，以 IE 尤其是 IE6 在国内如此高的占有率，以及那些用户的无知，这又是另外一个更大的噩梦。不知道你有没有碰到过，我不只一次的听到网站的编辑抱怨 Firefox 是个该死的浏览器，那一刻，我真的无语了。

shawphy这样回复：

Shawphy Reply: 八月 23rd, 2009 at 13:18

呵呵，老板，同事们听不听那就是技术之外的功夫了~
这个修炼好了，才是真正的强大
我提到的几点都是不影响实际功能的，却能增加视觉效果和体验的东西。我们有义务让“无知”的用户知道，用高级的浏览器可以获得更好的体验。我们不说，我们一味迁就，这些“无知”者永远无知，谁造成了他们的无知？有谁能帮助他们改变现状？只有我们！你不做，等着他们改变？可以，等他们的电脑都换WIN 7吧！如果他们有这个经费的话！
沟通有用么？沟通没用你是怎么工作的？你如何理解需求方意图的？是的，沟通是有用的。你需要让需求方知道，实现这些附加效果需要多付出一些劳动，开发周期会更长。让需求方评估决定是否值得投入这些时间和资金。当然，你可以通过暗示等各种手段来使其听你的。
另外，说Firefox不好用，那是有他们的立场，你是否帮助过他们了解Firefox有多好用呢？设身处地的想，我们是不是也有让人家“痛心疾首”的时候呢？他们那些“痛心疾首”的人又为我们做了些什么呢？告诉我们其实我们没那么糟糕，我们用烂的工具一样可以完成很好的体验？
我相信我们除了抱怨，除了等待，还有别的事可以做！
P.S.论速度，Firefox还不如IE6，更不用说Chrome了。所以我现在不会给人推荐Firefox，我只会推荐Chrome，还有傲游3。见我之前那篇博客。

那么，他们容易为什么这么说呢？直接看原文吧。。。

原文地址为：http://shawphy.com/2009/08/sorry-you-should-upgrade-your-broswer.html

之前写过一篇博客，问是否敢对IE6说不。实际上，我虽然自己没有公然抗议，暗自的还是有一些的。

最常见的就是:hover伪类了。除了二级菜单这类关键部位之外，其他地方一律用此处应当使用的标签，而不滥用a。其:hover伪类IE6无法支持，大不了少了点效果而已，不会有功能损失。想获得更好体验？请升级。为此写脚本做兼容？抱歉，我没时间。实际上，很多时候需求方并不在意这些细节交互地方。他们都不在意，你在意什么？

圆角？对不起，我可不高兴用一堆标签弄出圆角来。九宫格之类的办法不是不会，只是嫌麻烦。一堆标签自己看得心烦。直接用border-radius，浏览器要支持你就圆角，不支持就方的好了，没什么了不起的。除非需求方强烈要求，那在说

阴影？呵呵，同样对不起，阴影如果方便直接背景就背景，不方便实在抱歉……我给一个box-shadow已经很不错了，兼容Chrome Firefox 3.5呢。没了阴影功能又不会缺失，可有可无。

文字阴影？text-shadow伺候，如果需求方执意要求，那只能做背景图了……只是Chrome下文字阴影效果真是颗碜。。。

其实CSS3有很多很美妙的特性，利用这些特性可以非常轻易制作很出众的效果，何苦为了一些效果而花费大量时间呢？
适当跟需求方说明这些。告诉他们实现这些所要消耗的人力成本有多高。让他们自己决定哪些一定要，哪些可以放弃一部分低级浏览器用户。
在完善的沟通下，才能说服老板，说服需求方逐步抛开低级的浏览器，才能促进整个大环境的改变。

Tags: 圆角

Javascript | 评论:0 | 阅读:16772

innerHTML 的些摘记

Submitted by gouki on 2009, August 20, 6:39 PM

Gracecode网上的文章，好象研究了比较深。
本文的亮点写在了内容中，但我觉得argements.callee这个用法还是很有特色的。以前都是用this之类的来解决。。。

还有一个亮点就是document.Fragment这个东西。。。

不废话看原文：

异步 innerHTML

innerHTML 插入节点的性能的问题，通常是我们最关注的。在回答这问题时，James Padolsey 给出了他的解决方案，看到上述代码不仅赞叹了下：

JavaScript代码
function asyncInnerHTML(HTML, callback) {  
    var temp = document.createElement('div'),  
        frag = document.createDocumentFragment();  
    temp.innerHTML = HTML;  
    (function(){  
        if(temp.firstChild) {  
            frag.appendChild(temp.firstChild);  
            setTimeout(arguments.callee, 0);  
        } else {  
            callback(frag);  
        }  
    })();  
}

充分利用闭包解决 IE6 的内存溢出问题
使用延时 0 将操作从队列中拉出，防止浏览器假死
Document Fragment 给予我们个相当好的沙盘，只是我们经常忘记了它
回调的节点可以使用 DOM 标准的手法（appendChild）插入

了解了参数就很容易调用，例如

JavaScript代码
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';  
asyncInnerHTML(htmlStr, function(fragment){  
    document.body.appendChild(fragment);  
});

再次不禁赞叹下！

组织 innerHTML 字符串

说到 innerHTML ，通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法，有何不同

方式一

JavaScript代码
var arr = ['item 1', 'item 2', 'item 3', ...];  
for (var i = 0, l = arr.length, list = ''; i < l; i++) {  
    list += '<li>' + arr[i] + '</li>';  
}  
list = '<ul>' + list + '</ul>';

方式二

JavaScript代码

var arr = ['item 1', 'item 2', 'item 3', ...];

for (var i = 0, l = arr.length, list = []; i < l; i++) {

    list[list.length] = '<li>' + arr[i] + '</li>';

}

list = '<ul>' + list.join('') + '</ul>';

方式三

JavaScript代码

var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

详细的对比测试在这里（没错，还是 James Padolsey 那小子的 Blog）。同时，PPK 也整理了份有关 innerHTML 的速度测试报告。

IE 的陷阱

对于 IE，innerHTML 有个不大不小的陷阱（via），就是在 tbody 中插入 innerHTML 时，会报莫名的“未知的运行错误”。

测试地址在这里（经过测试，在 IE8 中仍然如此）。有兴趣的同学可以参看更详细的信息。

Tags: arguments, callee, innerhtml

Javascript | 评论:1 | 阅读:17146

JQuery -- this 和 $(this) 的区别

Submitted by gouki on 2009, August 20, 6:09 PM

其实这个还是很好认的啦。呵呵
this，如果是取得元素的话，则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。

看看作者是怎么写的，来源：http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。

起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover(
      function() {
           this.title = "Test";
      },
      fucntion() {
          this.title = "OK”;
      }
);

这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error--报了。

Error Code：
$("#textbox").hover(
       function() {
          $(this).title ＝ "Test";
       },
       function() {
          $(this).title = "OK";
       }
);

这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：

正确的代码：
$("#textbox").hover(
      function() {
         $(this).attr(’title’, ‘Test’);
      },
      function() {
         $(this).attr(’title’, ‘OK’);
      }
);