WordPress侧边栏标题选中右移效果

博客刚建的时候,在某些站看到过这种效果:鼠标移到侧边栏的某行字上(文章标题、归档标题或友链),这行字会整体右移一部分。那时候要改的东西太多,一时把它忘记了,今天在博友们的网站上溜达的时候,看到了相关方法,于是立马搞来,分享给也喜欢这个效果的朋友,效果可以见本站Hi记忆

方法来自v说《分享本站标题链接平滑右移效果》,原文有两种方法实现,一种是用jQuery,另一种是用CSS3实现。作者说用jQuery兼容性较好,而CSS3对IE浏览器就有些悲剧了……于是乎就用了jQuery实现的方法,想要了解更多可去作者原文看~

第一步加载jQuery库,现在的wordpress博客主题基本上都已经加载了,可以忽略这条。

第二步把下面的代码(注意有一个地方需要修改)加到主题调用的任一js文件中。

原文代码:

 
  1. jQuery(document).ready(function($){          
  2. $('.entry-title a').hover(function() {       
  3. //.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开         
  4. $(this).stop().animate({'marginLeft': '10px'}, 200);         
  5. //鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间         
  6. }, function() {          
  7. $(this).stop().animate({'marginLeft': '0px'}, 200);         
  8. //鼠标离开链接后的平滑效果,200同上         
  9. });          
  10. });    

注意标题的样式名称,他这里是.entry-title a,新手如我一开始试了半天,最好是用浏览器审查元素工具,看你需要右移的对象是属于哪个标签,我的是#right_col li a

Obviously...此方法不只限于Wordpress...配合标题加载效果也蛮有意思的~

青春悄然而逝,我,一路向前...

5 Comments On WordPress侧边栏标题选中右移效果

  1. avatar

    スーパーコピーブランド専門ネットショップで、
    ファッション時計,バッグ,財布とその他の世界一流ブランドスーパーコピー激安販売。
    弊店のスーパー コピーブランド時計は日本全国送料手数料無料です。
    ブランドコピー品の華麗さや実用でお客様に驚喜を与えます。
    誕生日 https://www.yuku006.com/ProductDetail.aspx?Id=201812090553351315

  2. avatar

    ブランド時計,スーパーコピー 時計,時計 スーパーコピー,ブランド時計N級品
    無料など取扱商品未使用を通販できます
    「ドルチェ&ガッバーナ ベルト」検索結果です。
    楽天市場は、セールや送料 数が日本最大級のインターネット通販サイト・オンラインショッピング コミュニティです。
    (標準順 写真付き一覧)ブランド通販 DOLCE&GABBANAドルチェ&ガッバーナ-ベルトの 商品一覧ページです。
    新作からレアモデルまで、送料無料にて格安通販【スマホにも 対応】 販売中のDOLCE&GABBANAドルチェ&ガッバーナのベルトは、全て自社で 在庫
    ドルガバはベルトの下にあるカテゴリで商品は478点あります。
    スマホで簡単 に出品・購入できるメルカリは、フリマ感覚でドルガバの中古

  3. avatar

    ブランドコピーブランド専門店
    ぜひ一度のブランドコピーブランド品をお試しください。
    驚きと満足を保証できます。
    ご利用を心からお待ちしております。
    偽物ブランド時計 https://www.watchergz.com/watch/menu-pid-21.html

  4. avatar

    『今季の新作』【送料無料】
    【限定価格セール!】激安本物
    【本物安い】品質100%保証!
    【信頼老舗】激安販売中!
    Japan最新の人気、本物保証!
    信用できる取引店へようこそ
    【信頼老舗】超激安!
    人気No.1、激安店舗【即日発送】
    大量仕入れ、直接輸入で圧倒的価格を実現
    【新入荷】激安販売
    私たちは、デザイナーの多数な選択を運ぶ
    芸能人愛用『大注目』
    手頃な価格でお好きなもの
    今、私たちは安価な高級品海外通販しています。
    高品質と最高の専門の顧客サービスと
    ルイヴィトンバッグ https://www.watcher020.com/watch/menu-pid-247.html

  5. 注文から到着までとても早かったです!
    付属品なしと記載でしたがブランドの袋をつけて下さいました☆プレゼント用に2枚入れてくださり、嬉しかったです。
    また機会がありましたらお願いしたいお店です(^^)/

| ^_^ 本站因你的评论更精彩!

发表评论