一个类似淘宝固定工具条的效果

在淘宝的列表页上有个列表排序的工具条,这个工具条默认显示是正常的,如图

tb1

,当滚动条往下拖动到该工具条的时候,改工具条就会始终固定在浏览器的顶部,就是position:fixed效果。

如图:

tb2

在当滚动条往上拖动的时候就会恢复原样,(可能表述不清楚,大家上淘宝自己去看吧。)

以前很讨厌这个效果,不习惯。最近感觉这样的工具条效果还真不错。所以今天尝试的自己弄了一个效果。

主要实现思路:在拖动滚动条的时候比较滚动条卷掉的高度和该工具条元素的Y坐标的值,如果滚动条卷掉的高度大于该工具条元素的Y坐标的值,那么将该工具条元素设置成position:fixed。 Read More »

史上最雷人的前端开发面试题

大清早打开QQ,群里有人发的,真的雷到我了。几乎可以号称史上最雷人的前端开发面试题,题目是:
《javascript权威指南》因为封面是一头犀牛,所以这本书通常被业界叫为犀牛书,那么你知道这是什么犀牛吗?请简述一下该犀牛的特点和珍稀程度。

参考答案:
http://home.blueidea.com/space.php?uid=1&do=thread&id=168
http://baike.baidu.com/view/614882.htm

一个闪光字的效果【构造函数方式二】

上接http://www.css88.com/archives/1910
这里新加了一个extend方法.


function extend(des, src) {
if (!des) {
des = {};
}
if (src) {
for (var i in src) {
des[i] = src[i];
}
}
return des;
}
function MagicColor(elem,colors,interTime){
this.elements=elem||[];
this.colors=colors||["#CC0000","#CC6D00","#CCCC00","#00CC00","#0000CC","#00CCCC","#CC00CC"];
this.indexColors=0;
this.interTime=interTime;
}
extend(MagicColor.prototype,{
timerCall:function (){
var elem=this.elements;
var color=this.colors[(this.indexColors++)%this.colors.length];
for(var i=0;i<elem.length;i++){
elem[i].style.color=color;
}
},
reset : function(){
if(this.timer){
clearInterval(this.timer);
delete this.timer;
}
},
start:function(){
this.reset();
var self=this;
this.timer= setInterval( function(){
self.timerCall();
},this.interTime||100);
}
});

调用还是:


function $(id){return document.getElementById(id)}
var effect = new MagicColor([$("comment1"),$("comment2"),$("comment3")],["#000000","#CC0000","#C00000","#00CC00","#0000CC","#00CCCC","#CC00CC"],500);
effect.start();

一个闪光字的效果【构造函数方式】

这是一题知名公司的前端开发面试试题,要求写出闪光字的效果。基本思路是:

1.页面中可能多出使用;

2.选出几种颜色;

3.选择合理的跳动时间。

例如html代码


<div id="comment1">愚人码头</div>
<div id="comment2">前端开发</div>
<div id="comment3">http://www.css88.com</div>

javascript代码:


function MagicColor(elem,colors,interTime){
this.elements=elem||[];
this.colors=colors||["#CC0000","#CC6D00","#CCCC00","#00CC00","#0000CC","#00CCCC","#CC00CC"];//可选的颜色值
this.indexColors=0;//颜色值索引
this.interTime=interTime;//跳动的间隔时间
}
MagicColor.prototype.timerCall=function(){
var elem=this.elements,cls=this.colors;
var color=this.colors[(this.indexColors++) % this.colors.length];//去除当前颜色
for(var i=0;i<elem .length;i++){
elem[i].style.color=color;
}
};

MagicColor.prototype.reset=function(){
if(this.timer){
clearInterval(this.timer);
delete this.timer;
}
};
MagicColor.prototype.start=function(){
this.reset();
var self=this;
this.timer = setInterval(function(){
self.timerCall();
},self.interTime||100);

}
function $(id){return document.getElementById(id)}
var effect = new MagicColor([$("comment1"),$("comment2"),$("comment3")],["#000000","#CC0000","#C00000","#00CC00","#0000CC","#00CCCC","#CC00CC"],500);
effect.start();

感谢肉块的指教,欢迎大家拍砖。

下接:http://www.css88.com/archives/1921

如何将一个字符串反转

今天射雕在前端扑通做了一个测试:如何将一个字符串反转?比如 abcd => dcba。可以使用任何现有的前端知识。

同时我也把这个问题转到了js森林群里。

比如这么一个字符串:“愚人码头是css88.com的博主。”反转后应给是:“。主博的moc.88ssc是头码人愚”。

我的第一个反应也是使用js解决:


<div id="test">愚人码头是css88.com的博主。</div>

var testString = document.getElementById("test").innerHTML;
testString=testString.split("").reverse().join("");
document.getElementById("test").innerHTML=testString;

这种回答被射雕评定为“最没创意的答案!”。

js森林的朋友,丸子,PRcss,小志等提出了css的解决办法,就是这两个非常少用的css属性:direction:rtl; unicode-bidi:bidi-override。


<div style=" direction:rtl; unicode-bidi:bidi-override">愚人码头是css88.com的博主。</div>

这里有个一个瑕疵,就是文本右对齐了,但是还是符合题目答案的。

解决上面这个瑕疵可以使用float:left这个属性,但是又多了一个浮动。

哎,脑子犯傻了,谢谢船长提醒在留言中的提醒,光使用direction:rtl; unicode-bidi:bidi-override文本是右对齐的,使用text-align:left就能将文本左对齐。

还有一个问题:在文本超过一行显示的时候,js的方法和css的方法显示是不一样的。查看demo:http://www.css88.com/demo/overturn/overturn.html

至于direction和unicode-bidi极其属性值大家可以看看css手册。我也会去再恳一边css手册,不要等css3来了,css2有多少属性还不知道。

《精通JavaScript》一处错误

第86页,代码清单5-28中的append方法中for ( var i = 0; i <= elems.length; i++ ) 应为for ( var i = 0; i < elems.length; i++ )
该错误已经在8月28日以邮件的形式发送给“懒到死”,可惜至今没有得到回复和被《精通JavaScript》勘误页面摘录:http://realazy.org/jspro/erratra

《UCD火花集》电子书版下载

今天网友巧笑倩兮发我一份《UCD火花集》电子书版,这是由“小狐狸”整理的一本电子书完全由来自http://ucdchina.com/的文本整理而成,基本还原了实体《UCD火花集》的内容,当然了还请支持正版:),感谢网友巧笑倩兮,感谢小狐狸。

点击下载DOC格式:http://www.foxygame.cn/upload/UCD火花集.doc

点击下载PDF格式:http://www.foxygame.cn/upload/UCDhuohuaji.pdf

===================UCD火花集电子书目录================================

第一章 用户体验设计在团队中… 5

UED——鱼缸里的水… 5

接过用户的绣球… 6

管理者不应直接参与产品的开发与设计… 7

UED应该向产品负责,而不是向PM负责… 8

第二章 用户调查和研究… 12

我要如何了解“她”… 12

贯穿整个产品生命周期的用户研究… 15

隐式挖掘网站用户行为… 17

角色设定——了解我们的用户… 19 Read More »

“炮轰”事件中不得不说的几点

这几天前端界可真不太平,阿里巴巴疯狂招人,几乎每个群都能看到阿里招人的帖子,这是大好事啊!还有一件事情就是最近的“炮轰”事件,和阿里招人一样的疯狂,这两天群里也到处都是。

关于炮轰事件的一些链接:

http://bbs.51js.com/viewthread.php?tid=85328&extra=&page=1

http://www.javaeye.com/topic/474725

http://bbs.blueidea.com/thread-2950318-4-1.html

给自己澄清

本来我可能和大多朋友一样,看看热闹,说说笑。但是自从《炮轰《JavaScript征途》,兼批技术社区的吹捧之风》今天在再各个群里传播之后,我的QQ收到了6个网友类似的问题:你怎么被炮轰了,这些事情是真的吗?因为我今天从9:00-晚上下班几乎都在开会中午除了吃一顿饭的时间就没看过QQ留言。很多等QQ我在线的时候那几个网友都已经不在。再这里我做一下澄清:css88(我的博客域名)和css8(《JavaScript征途》作者)没有任何关系。至于域名雷同也是纯属巧合。估计那几个朋友也是看到css88和css8很像所以误认为是我了。谢谢大家的关注,可惜我是菜鸟,才疏学浅,写书这种事情就更不敢奢望了。

css88和css8鲜为人知的故事

要说和css8一点关系也没有其实也不对,其实我们也有过一段小故事。本来这事情已经过去很久了,没必要说了,但是真好碰到这档子的炮轰事件,勾起了我的往事。大概一年前,css8在css森林群说一个“css哥德巴赫猜想”。把一个css问题和哥德巴赫猜想相比实在的让人无法接受。所以我个css8在css森林发生一些小争执。可能是他认为和我们无法沟通,就退出了css森林群。我也一直愧疚,幸好我的观点当时得到龙哥和未来的支持,所以我逃过了一劫,免于被龙哥T出。

就“炮轰”事件的几点观点

1.css8的技术和对前端做的贡献无可厚非;

2.书本出错本也没什么大不了的事情,看看《精通javascript》这本书也有很多错误,甚至还有几个错误没被勘误页面收录,但是也没见有人“炮轰”。本来指出书中的错误对作者和读者都是有好处的,但是事情发展到这个底部不得不说请各位坦诚,谦虚,放低姿态。

3.多一些真诚,多负一点责任,牛人写书评不要太商业化。做技术的RP不好挣啊。

一个DOM选择器

从一个js文件中分离出来的,还不知道作者是谁。

在指定的DOM节点context下按CSS2,CSS3选择器的定义去找出相关的DOM节点
支持的选择器:
E[att^="val"],E[att$="val"],E[att*="val"],E[att~="val"],E[att|="val"],E[att!="val"],E[att="val"]
E:enabled,E:disabled,E:checked,E:not(s)
+ E.class
> E.class
E.class
E#id
E
参数:pattern:CSS2 Selector可以通过逗号分隔多个选择器,context指定要查找的DOM节点范围
返回值:[DOM Collection]


function selector(pattern, context) {
 var re = new RegExp('([a-z]*)([\.#:]*)(.*|$)', 'ig');
 var match = re.exec(pattern);
 //alert(context);
 var conditions = []; 
 if (match[2] == '#') conditions.push(['id', match[3]]);
 else if(match[2] == '.') conditions.push(['className', match[3]]);
 else if(match[2] == ':') conditions.push(['type', match[3]]); 
 var s = match[3].replace(/\[(.*)\]/g,'$1').split(<a href="mailto:'@'">'@'</a>);
 for(var i=0; i<s.length; i++) {
  var cc = null;
  if (cc = /([\w]+)([=^%!$~]+)(.*)$/.exec(s[i])){
   conditions.push([cc[1], cc[2], cc[3]]);
  }
 }
 var list = (context || document).getElementsByTagName(match[1] || "*"); 
 if(conditions) {
  var elements = [];
  var attrMapping = {'for': 'htmlFor', 'class': 'className'};
  for(var i=0; i<list.length; i++) {
   var pass = true;
   for(var j=0; j<conditions.length; j++) {
    var attr = attrMapping[conditions[j][0]] || conditions[j][0];
    var val = list[i][attr] || (list[i].getAttribute ? list[i].getAttribute(attr) : '');
    var pattern = null;
    if(conditions[j][1] == '=') {
     pattern = new RegExp('^'+conditions[j][2]+'$', 'i');
    } else if(conditions[j][1] == '^=') {
     pattern = new RegExp('^' + conditions[j][2], 'i');
    } else if(conditions[j][1] == '$=') {
     pattern = new RegExp(conditions[j][2] + '$', 'i');
    } else if(conditions[j][1] == '%=') {
     pattern = new RegExp(conditions[j][2], 'i');
    } else if(conditions[j][1] == '~=') {
     pattern = new RegExp('(^|[ ])' + conditions[j][2] + '([ ]|$)', 'i');
    }
    if(pattern && !pattern.test(val)) {
     pass = false;
     break;
    }
   }
   if(pass) elements.push(list[i]);
  }
  return elements;
 } else {
  return list;
 }
}

绿盟科技招聘前端开发工程师

http://www.nsfocus.com
招前端开发

有意向的朋友请发简历至lvxuhui@gmail.com

周围的朋友也可以推荐一下,谢谢~

地点:北京海淀
待遇:6K左右,15.5个月薪水,五险一金
职责:
1、Web界面制作;
2、实现界面交互,增强用户体验;