jQuery实现首字下沉

2010/03/15 22:22 - Posted By - Tags: , - Category: 电脑技巧
10 条评论

很囧很老的一个话题了，一般人多是直接在CSS中添加一句让段落 .P 的第一个字符增大字号来解决，不过这样会产生一个问题：每个段落的第一个字符都下沉了。这显然不是我需要的效果，因此一直以来我都使用的一个首字下沉插件，可以只给每篇文章的第一段第一个字符设置首字下沉效果，并且能判断第一个字符是否以”<“开头，如果是则不做下沉处理（因为以”<“开头的内容可能是代码的一部分）。不过自从用上Ajax评论功能之后，由于加载了jQuery，便想将功能移植到jQuery上来实现：既然已经加载了这么个大东西，不充分挖掘点潜力怎么划得来！

菜鸟献丑了，整个只需要一句话即可搞定

  1. jQuery(document).ready(function($){
  2. $('.content p:first-child').addClass("fp");
  3. })

然后在CSS里添加 (根据自己需要改啦~)

  1. .fp:first-letter{
  2.         font-size:250%;
  3.         line-height:1em;
  4.         float:left;
  5.         color:#8946ab;
  6. }

代码没有判断第一个字符,但是我想一般情况我也不会在一篇文章的开头就插入个链接或者图片吧,因此将就着也就可以了。效果就不用截图了吧,随处一望即可.

PS：仍然有个小问题，会获取引用内容的第一个段落添加 fp 类，不过，小事小事哈。

本文链接: http://isouth.org/archives/242.html , 转载请注明出处，此外还可以订阅我。

相关日志 Relate Posts

收藏与分享 : Twitter 分享 | Facebook 分享 | Diglog 分享 | FriendFeed 分享 | Google 书签 | 雅虎收藏 | Messenger | SkyDrive | 百度搜藏 | QQ 书签 | QQ 空间 | 朋友社区 | 鲜果推荐 | 豆瓣九点 | 开心分享 | 人间分享 | 人人分享 | 新浪微博 | MisterWong 书签 | del.icio.us 收藏 | Buzz | PDF 下载

“jQuery实现首字下沉”10条留言

  1. 万戈: March 16, 2010 at 8:45 am988
    Reply

    突然发现JQ无所不能～

    • 起衣: March 17, 2010 at 3:44 pm991

      居然是万戈大家光临，JQ学习中..严重受木木影响额

  2. littlewater: March 16, 2010 at 7:53 pm989
    Reply

    一句话详细介绍jQ什么用的可能？^^

    • 起衣: March 17, 2010 at 3:42 pm990

      一句话还真说不出来…转一句：jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

  3. littlewater: March 18, 2010 at 7:39 pm992
    Reply

    C的JS库、还是JS写的什么辅助库？^^

    • 起衣: March 28, 2010 at 1:16 pm993

      真实难以解释额，因为其实我也不怎么懂的 :neutral:

  4. littlewater: March 29, 2010 at 8:49 am994
    Reply

    昨天在CNBETA看到了啥叫做JQUERY～

    • 起衣: March 29, 2010 at 8:57 am995

      嘿嘿，这玩意其实我还没入门..

  5. littlewater: March 29, 2010 at 10:33 pm996
    Reply

    米事的^^

发表留言（Ctrl+Enter提交）