-
WEB前端开发群
75791124(HTML+CSS,满)| 84902436(jQ满)<
67764949(满) | 62389544(满)
80215851(满) | 31584324(满)
71795209(满) | 66199085(满)
71795235(满) | 62544413(jQuery,满)|
84902470(js群,满)
7617538(js森林,入群条件)
71795162(HTML+CSS,开放)
80215721(jQuery森林,新群)
潜水者勿扰,一个月清理一次潜水 -
订阅我/收藏我/关注我
-
文章分类
-
赞助商
-
最近评论
- 饺子 在 我使用的CSS框架 上的评论
- Jerry Qu 在 webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示 上的评论
- SteepVi 在 友情链接 上的评论
- 逆刀沉沦 在 【IE6的疯狂之三】IE6 3像素BUG的实例 上的评论
- time 在 【IE6的疯狂之二】IE6中PNG Alpha透明(全集) 上的评论
- time 在 IE8的css hack 上的评论
- 冰剑 在 border-radius(圆角)-css3演示 上的评论
- baobao 在 【中国移动】139邮箱 用户体验室 诚聘 前端开发工程师 上的评论
- 猴子 在 【中国移动】139邮箱 用户体验室 诚聘 前端开发工程师 上的评论
- amiore 在 【杭州】招聘视觉设计师,前端开发工程师 上的评论
-
最近文章
-
标签
-
文章存档
-
-
管理
点击最高的文章
- 关于前端开发工程师的地域、薪水、工龄、技能的调查 - 14,379 views
- 【IE6的疯狂系列】IE6 BUG大全(bug征集、整理中..) - 8,240 views
- 一个关于透明度继承的问题 - 7,228 views
- 前端开发必备工具之网页调试工具篇(2009年4月6日更新发布) - 5,398 views
- web开发利器Aptana studio 1.2(下载,破解,汉化)(2008年11月3日更新) - 5,225 views
- 友情链接 - 5,023 views
- 前端开发必备工具(2009年3月23日更新) - 4,516 views
- css自定义导航、按钮样式 - 4,508 views
- 【jQuery插件】等比例缩放图片浏览-LoadImage - 4,276 views
- Flex皮肤设计制作的捷径 - 4,208 views
- 作为一名前端开发工程师居然没有IE6! - 4,138 views
- Blueprint CSS栅格化框架可视化生成工具-Boks - 4,073 views
- 《精通CSS:高级Web标准解决方案》(CSS Mastery:Advanced Web Standards Solutions)下载 - 4,063 views
- 【IE6的疯狂之九】li在IE中底部空行的BUG - 4,040 views
- DW cs4的jQuery语法提示插件 - 3,787 views
- 用Aptana调试JavaScript教程 - 3,662 views
- 前端调试利器DebugBar - 3,631 views
- CSS引用(link)和导入(@import)的区别(2009年4月13日更新) - 3,585 views
- 前端开发必备工具之辅助开发工具篇 - 3,459 views
- 联系我 - 3,329 views
友情链接
blogroll
- CSS学习网
- 走走停停看看
- .Net世界
- csszhan.com
- foxbaty’blog(狐狸)
- 源码控件网
- 搜道
- ImageMagick中文站
- linxz's BLOG
- PRcss
- 冰剑'blog
- CSS9.NET
- 禽兽
- what's the RIA?
- moondy's zone
- 蓝色骑兵
- stri’s blog
- 追意布落格
- 啄米鸟
- ytzong’s blog
- isparkle
- 蝎子’s Life
- 百搜吧
- web前端开发工程师的随记-黑妞haha
- L 生活茶水间
- 爱素材
- Web元素
- leeiio chaos made
- 关注前端jQuery
- 布丁足迹
- Y7L8′Blog
- 幼学笔记
- 飘飘的生活空间
- Skiyo
- Time Machine
- 量子期货
- PHPText.Net
- 痕的blog
- Crazy Web
- 一路彷徨
- 关注学习前端开发
- 丸子の部落
- 快乐心情
- website ui
- 猴子
- 筱白—人生若只如初见
- gulu77
- 绣财
- 广东考试网
- 我爱CSS-DivCSS网页布局
- 前端观察
- 笑话网
- 壹想
- YoungBoy
- javascript森林
- Beautycss
- じ☆ve怺狟'Blog
- weilaixu.cn
- 流水涵清
- CssRain-前端技术
- 奥想创意
- Kanoe's Blog
- Rekey's WebSpace
- 关于前端那点事儿
- TwinsenLiang
- TsoLong Blog
- SMbey0nd's Blog
- 搜道空间
- demox
- 堂主
- 碧云轩工作室
- 卜咯米
- 天天爱我吧
- 蜗爱css
- 偸米飯
- 彬Go-关注前端开发
- 奇迹林
- 一路告别
- 小繁's Blog
- 内部参考
- xhlv
- OurJS.cn
- unicac
- 第三据点
- 凤鸣BLOG
- 鹏衷铃
- CSS森林
- 彩虹堂
- 這才叫做畫-WAYCE BLOG
- putaoshu
- 阿肆的个人博客
- 十字花匠
- 背光脚本
-
RSS源
一个闪光字的效果【构造函数方式二】
上接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();
感谢肉块的指教,欢迎大家拍砖。
如何将一个字符串反转
今天射雕在前端扑通做了一个测试:如何将一个字符串反转?比如 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
一个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;
}
}



