你的位置:快乐忆站 \ 前端 \ 文章正文

主题效果之首页文章伸缩代码

前两天放出了本站的无特效兄弟模板《clean》,有童鞋叫我分享本站的一些特效用于折腾,国庆期间趁着还有点空就整理了一下,可能这是一个系列的文章,我抽空会把本站的所有特效都分享出来,有能力的请自行折腾,当然,有个前提是:我的特效代码只是基于我放出的这个《clean》模板,其他模板代码略微不同,请自行揣摩并修改,如有任何疑问请直接留言。(最近很少上QQ,但是博客会上得勤快一点,所以QQ找我不如在这边给我留言来得快~)

老规矩,第一段废话,第二段进入正题。首先,我本人使用的代码是从林木木那偷过来的,原文如下:http://immmmm.com/articles-telescopic-effect-new-code.html感谢林木木分享如此强悍的代码!这里我分享两种伸缩jQuery代码:

鼠标悬浮即展开摘要(本站正在使用)

这里特地感谢搜搜,没有他就没有鼠标悬浮展开这回事~对了,加载jQuery代码之前必须加载jQuery库,至于怎么加载jQuery库还不知道的童鞋我觉得还是别折腾了吧~~~~(>_<)~~~~ 

jQuery代码:

$('.log_desc:first').slideDown();//使列表第一个(:first)展开
$('.t h2 a').hover(function(){
    if($(this).parent().parent().next().is(':hidden')){
        $('.log_desc').slideUp();//如果摘要层.log_desc是隐藏的,鼠标悬浮后先将全部摘要层缩回
        $(this).parent().parent().next().slideDown();//再将鼠标所在的摘要层展开
    }else{
        $(this).stop().animate({marginLeft:"+=6"},150)};//如果摘要层是显示的,那么鼠标悬浮后标题右移6px(这个可以不要*)
    },function(){//鼠标移开后的动作
        if($(this).parent().parent().next().is(':visible')){
            $(this).stop().animate({marginLeft:"0"},100);//如果当前鼠标所在的摘要层是可见的,那么之前右移的6px现在缩回(与上面'*'对应)
        }}
)

css代码:(加载时先将摘要层全部隐藏)

#contentB .log_desc{display:none}

鼠标点击后展开摘要(原版)

jQuery代码:

$('.logcontent .log_desc:first').slideDown();//使列表第一个(:first)展开
$('.t h2 a').click(function(){
    if($(this).parent().parent().next().is(':visible')){
        window.location = $(this).attr('href');//如果摘要已展开,单击打开文章链接
    }else{
        $('.logcontent .log_desc').slideUp();//先收缩全部摘要
        $(this).parent().parent().next().slideDown();//然后展开点击的这个链接对应在摘要
    }
    return false;//单击不打开链接
})

css代码同上。

好了,到此代码分享完毕,这两段代码该注释的地方差不多都注释了,使用代码时请将注释去掉,否则易出错。Demo见本站首页效果即可!复制代码还是建议用非IE内核的浏览器。如果使用的是我提供的《clean》主题,那么你啥都不用改,如果不是,请注意jQuery选择符中对象的类推,并不保证所有主题都能使用该代码,当然,代码是通用的,只要支持js就能使用。

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 126#
    足球比分
    足球比分 Firefox 53.0 Windows 2017-06-02 23:07 回复
    这个效果不错。。
  2. 125#
    小杰
    小杰 2010-10-15 13:59 回复
    写的不错,学习~~
  3. 124#
    wmtimes
    wmtimes 2010-10-10 21:40 回复
    虽然我没看代码。但个人觉得应该和那个tab的效果差不多吧。只是多了个二次点击的时候a标签效果。
    小松
    小松 2010-10-10 21:43 回复
    不太一样,tab的还要复杂一点吧~
  4. 123#
    kaka
    kaka 2010-10-10 11:30 回复
    很给力啊~~
    小松
    小松 2010-10-10 12:04 回复
    那是必须的啦~
  5. 122#
    老实人博客
    老实人博客 2010-10-09 12:39 回复
    有空我也得折腾一下。如果代码通用,支持JS就行,那么就ZB也可以折腾了。
    小松
    小松 2010-10-09 12:56 回复
    通用的啦~
  6. 121#
    龙湾港
    龙湾港 2010-10-08 15:09 回复
    哈哈  学习来了
  7. 120#
    软件盒子
    软件盒子 2010-10-08 10:44 回复
    刚回来来报个道,呵呵
  8. 119#
    人好哇!
    人好哇! 2010-10-07 12:10 回复
    这个。。。还没有打算用jQ特效,咱是保守的技术派,不想折腾……等我想折腾的时候就来用用这个效果,mark下先。
    小松
    小松 2010-10-07 12:15 回复
    jQuery真的是轻量级的前端开发利器啊
    人好哇!
    人好哇! 2010-10-07 15:06 回复
    不过我对它还不怎么感冒……
    小松
    小松 2010-10-07 15:08 回复
    呵呵,主要是用起来很方便啦~
  9. 118#
    Frank
    Frank 2010-10-06 11:48 回复
    都试了很多次,怎么就实现不了呢。
  10. 117#
    小松
    小松 2010-10-05 21:18 回复
    @heson:就是从wp上扒来的~
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap