dreamsky-webdesign
之前做web设计前总是会考虑一下html css的实现方式与复杂度，于是设计的比较简单(省点写代码的功夫:D)
这次纯自由发挥，顺便尝试一下新风格
猛击这里查看online版
时间比较赶，没做IE6的兼容性处理，本来就不打算弄IE6这死东西。
最近的项目在多次修修改改之后遗留下了一个悲剧的一二级菜单，html结构混乱不说，还用了N多全局变量，N多脚本去制作切换的效果。所以决定着手重构之。
首先考虑是最激进的方法。只用CSS实现，具体的实现看这里
重构后的效果 -> 这里
除了hover的时候反应速度很快以外也没啥问题了。
后来收到一个feedback
用户从“Bug”按钮移动到“Search bug”的时候，会触发到“报表”的hover效果，以至于难以点到“Search bug”的按钮。
（这里可以体验一下）
第一时间想到的是延迟hover的效果，查了一下相关资料未果，于是写下代码(用到了Jquery)：
function navSwitcher(){
var topNav = $(“#navigation li.menu”);
topNav.hover(
function(){
var item = $(this);
setTimeout(function(){item.addClass(‘menu_hover’);},300);
},
function(){
var item = $(this);
setTimeout(function(){item.removeClass(‘menu_hover’)}, 300);
}
);
}
想法是用setTimeout延迟一下hover的效果，测试时候又发现了个问题，如果从一个按钮快速移动另外一个按钮再移回原来的二级菜单，会触发一个死循环。。
如果每次mousehover与mouseover的的时候clearTimeout一下应该可以解决问题了，于是修改了一下代码，顺便调整了timeout时间优化使用体验，完整的Demo可以到这里查看
代码如下：
function navSwitcher(){
var topNav = $(“#navigation li.menu”);
topNav.hover(
function(){
var item = $(this);
clearTimeout(item.data(‘timeout’));
var t = setTimeout(function(){
item.addClass(‘menu_hover’);
},100);
item.data(‘timeout’, t);
},
function(){
var item = $(this);
clearTimeout(item.data(‘timeout’));
var t = setTimeout(function(){
item.removeClass(‘menu_hover’)
}, 200);
item.data(‘timeout’, t);
}
);
}
嗯。。代码有点丑陋。。不过当我尝试把他封装一下时候发现会额外消耗5ms左右的时间。。于是还是这样好了，
在我的机器上FF3的测试结果:
尚在可以接受的范围:D
于是此次优化工作暂告一段落。
最近项目在优化前端代码的时候到了一个匪夷所思的地步，于是把动态菜单的js也喀嚓了，用CSS实现
主要是用a:hover的原理，Test了一下IE6 7 8 chrome FF 都兼容。
暂时只支持两级。
到这里可以查看这个小Demo
IE6下有个小bug，如果a:hover跟a的标签没有任何改变的话触发不了hover效果，所以把position:relative写在a:hover里边了
PS:临时测试，css代码胡乱写了….
<ul>
<li>
<!–[if IE 6]><a href=”#”><table><tr><td><![endif]–>
<a href=”#”>菜单1</a>
<p>
<a href=”#”>子菜单1</a>
<a href=”#”>子菜单2</a>
<a href=”#”>子菜单3</a>
</p>
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
<li style=”background-color:#9FF;”>
<!–[if IE 6]><a href=”#” style=”background-color:#9FF;”><table><tr><td><![endif]–>
<a href=”#”>菜单2</a>
<p>
<a href=”#”>子菜单4</a>
<a href=”#”>子菜单5</a>
<a href=”#”>子菜单6</a>
</p>
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
callni
Subtitle change to “imagination comes true”。
And…callni website is coming soon…
游戏时间比较短，基本一个下午就搞定。并且十分简单。。。第一次玩就S亲密度+找到故乡。（那些没S的小朋友肯定是思想不纯洁…）
由于有N个结局，于是就花了点时间跟亲爱的赫萝同学度过了几年。。。
本作赫萝基本是全程配音，虽然我对声优不太感冒，不过还是给小清水亚美的配音给xxx了 T-T，在城里没事干的时候总喜欢点点Q版赫萝聊几句…
挣钱方面主要是靠低买高卖，基本上一个城市的产品到另外一个城市卖都是可以盈利的，当然最好挣的还是多跑点路卖热门产品，譬如说古朗巴拉斯的高级药拿到某村里边卖的差价将近10000，多买几个一趟就是几w收入，够你用到通关了。并且越贵的物品差价越大，那些几十银的水果就当刷刷知识好了。
PS:这个经商系统有点简陋，可以加上各种货币不同的汇率、增加地方突发事件、与其他商人的交互、多一些价格波动因素、谈价格的PK过程等等感觉会更好，XD有点像大航海时代了
偶尔会遇到赫萝跟你讨东西吃的情况，一个苹果就得1000了，所以身上最好常备一两k。还会随机发生增加亲密度的情节，有次露营的时候赫萝发现了一个的温泉，叫寡人跟她一起泡，为了保持寡人的纯洁形象…含泪选了没进去，错过了增加亲密度的时机 T_T
最近还出了新的篇章《渡海之风》，期待汉化ing
Horo
PS: 用模拟器玩的好处就是可以随便截图，嘿嘿
工作的时候突然发现pc一卡一卡的，打开资源管理器一看顿时傻了眼。
virus
万恶的“塞”门铁克antivirus两个进程居然把cpu资源吃完了。
看来某些低级病毒破坏力还远远赶不上这杀毒软件。
并且由于某些特殊原因还不能把这死东西删除，每周系统盘还得给它QJ一下，来个全盘杀毒…
我觉得应该改名成 symantec virus吧，并且是个很霸道的virus，不与其他小病毒共存。
说起来antivirus市场可以做得这么广大实在是太不可思议了，N年来我家的pc从来都不装这xxx东西，几乎是没跟病毒粘上边儿（仅有几次的人生污点是因为用了IE6！）。
总结了一下大概有以下几种:
1.定宽截断
.demobox{
width:200px;
overflow:hidden;
height:2em;
line-height:2em;
word-break:break-all;
text-overflow:ellipsis; /* IE中截断后加上... */
white-space:nowrap; /* 不换行 */
}
效果:
如果不考虑长字符串的情况那么只需要 overflow:hidden和height属性就可以了，把换行的数据都hidden掉，间接实现截断效果，嘿嘿。
PS: FF中去掉white-space:nowrap属性就不会出现截断半个中文字的情况了
2.自适应宽度截断
如果内容有长字符串或者是加了white-space:nowrap的话，那么是会把外部容器撑破的，于是就不能自适应宽度截断了。
这里我利用了一下table的table-layout:fixed来间接实现。table在fixed模式中,td(或th)不会因为里面内容的大小而改变大小。[Gmail和QQmail的邮件列表都是采用这种方法 
]
先简单看一下效果：
table用了fixed模式并且设置了width:100%,那么table以及td的宽度就只有200px了，溢出的内容用overflow:hidden隐藏掉，于是便实现了自适应宽度的截断效果。
当然这方法也是有弊端的，首先为了实现效果把html结构弄复杂了，其次是(看下图)
截断的单元格与旁边的数据贴得太近了，并且padding-right是控制不了的。Gmail用了个十分懒的方法，在两个td中间塞多一个空白的td把两列数据分开，看起来会美观些。而QQmail是在次列td里面放置一个div元素，设置适当的margin把截断的数据撑开，让数据看起来不会连成一块。我决定塞个 进去好了，省事