黄锦诚的个人博客--有志者是锦诚!

特殊字符模拟STEP步骤箭头效果实现

  最近项目整天改来改去,页面数据很多都是手工来添加的,所以一修改就要搞个半死,连续好多天晚上加班到十一点,浑身都累得没有一点气力了,苦命的伪码农啊。今年部门里招进来的算是比较久一点的人,也是受不了,提出要离去的申请了,估计最迟也是在月底了。唉,这种日子真不好过。

  弄一这个,搞一下那个,都快变成文员编辑了,受不鸟。

  这几天折腾弄了一个用◆这个特殊字符来折腾STEP步骤箭头的效果,就是那种一步一步的引导的那个效果,几经调试,才勉强实现效果,但兼容性和实现的效果上有些问题,主要是IE6这种快要退出历史舞台的古董级别的浏览器了(虽然我现在还是天天有在用来测试兼容性),不管了,也暂时没有时间弄了,先放上来,以后有时间再整理或再加强扩展吧。

  用纯特殊字符◆来模拟的效果思路实现的话是很简单,截取字符的尖角部分,再将两个小叠加效果,造成视觉上的统一就完事了,但过程中调试比较麻烦,且兼容性也有些问题,所以也不好控制,虽然说扩展性可能会强些,但效果在浏览器中去却不如人意,用图片做尖角的效果会更好些,方便控制,宽度也可以自适应,按理说是高度也是可以做成自适应的(以后有时间再做高度的自适应)。以下是模拟的效果效果在各个浏览器的对比,DEMO中有用模拟和用图片实现的效果,标准浏览器的效果是基本差别不大的,甚至你看不出来是模拟的,点击进入DEMO查看,点击打开

  以上是在各个浏览器中的情况对比,一如既往的,标准浏览器的支持情况比较好,IE6即使用了HACK处理也不尽如人意,所以弃之不用。

  对于层叠的问题,用了一小段的脚本函数来进行控制,可以应对多个这种导向列表,免去重复写多个 z-index 的问题。其他的基本没有任何的技术含量了,具体请看源码。

  各位看看对完美的追求或是对代码的精简,各人有各自的取舍,本文也只是作一个简单的小尝试和折腾,希望能抛砖引玉,得到大家更好的解决方案,如果你有更发的实现方法或建议,希望与我取得联系,感谢您的阅读。

  本来十一放假一周后再回来上班应该很快就能过完十月的,但是最近节后天天都加班弄到十一点,所以时间觉得过得特别的慢,本来明天还要去加班的,为了明天不想加班,决定明天去爬山,去爬深圳的马峦山,我也是没去过,算是放松一下心情啊,最近非常的压抑啊。虽然说来深圳一年多了,还真没到过深圳几个地方,一年下来,体重没增,肚子却涨出来了,吃了很撑,坐下来也不舒服,需要多锻炼,颈部和手部的肌肉坏死,常常睡到半夜左右肩膀都没有知道,麻痹痛死了。虽然工作才一年,但职业病已不少了。

  什么时候能结束这种六天工作还天天加班的工作状态呢?

  期待着……



5条评论

  1. you说道:

    哈哈 早几天看见就好了 工作之余 过来转转 收货颇丰 哈哈 加油

  2. Terri说道:

    博主很强大,我支持

  3. saracy说道:

    :idea: 可以设置li span下的a和b的行高 line-height:26px !important line-height:30px; 这样可以解决在IE6下的问题!

  4. bigmosnter说道:

    谢谢你,哥们儿。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量