V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
shpasspass
V2EX  ›  问与答

有什么办法可以把别人网站的js特效复制下来?

  •  
  •   shpasspass · 2012-11-21 12:54:56 +08:00 · 7342 次点击
    这是一个创建于 4366 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近看见一个js特效不错,默认显示一半的文章,点击展开全文后,就可以看到全部文章。很想要这个特效,但是不知道怎么找。样例参考: http://tz100.com/
    16 条回复    1970-01-01 08:00:00 +08:00
    qiayue
        1
    qiayue  
       2012-11-21 13:07:19 +08:00
    jquery自己写,很简单的啊
    他的内容是全输出的,但是外边包了一个div,设置这个div固定高度(该站使用241px,建议是行高的整数倍,不然会出现最后一行只显示上一半文字效果)并且溢出隐藏。
    当点击“展开全文”时,设置该div高度为100%,就自动显示全文了。
    当点击“向上收起”时,设置该div高度为固定高度,就自动只显示一部分了。

    部分js代码给你复制出来了,仅用于说明以上回复,不要说我copy。:-D
    $('a.content_expand').unbind('click').bind('click', function(){
        var link = $(this);
        var data = link.attr('data');
        $('#cell_' + data + ' div.post_excerpt').height('100%');
        link.hide();
        link.next().show();
    });
    $('a.content_fold').unbind('click').bind('click', function(){
        var link = $(this);
        var data = link.attr('data');
        $('#cell_' + data + ' div.post_excerpt').height('241px');
        link.hide();
        link.prev().show();
        $('html,body').animate({scrollTop: $('#cell_' + data + ' div.post_excerpt').offset().top-80},'10');
    });
    Rabbit52
        2
    Rabbit52  
       2012-11-21 13:10:21 +08:00
    就一个 slideToggle 撒
    shpasspass
        3
    shpasspass  
    OP
       2012-11-21 13:29:14 +08:00
    @qiayue 多谢,可惜刚才去用了下,失败了。。。点上去没效果。。。可能是他需要取得data里的数据才可以用。
    shpasspass
        4
    shpasspass  
    OP
       2012-11-21 13:39:40 +08:00
    @qiayue 对了,他网站上这个js是怎么找到的?
    shpasspass
        5
    shpasspass  
    OP
       2012-11-21 13:45:37 +08:00
    大侠们能写一个适合静态页的这个特效吗?默认出现一半,点击后展现全文。
    虽然找到过一个http://js.alixixi.com/read_80414_164.html 但是他的按钮和内容合二为一了。我希望的是按钮和内容分离的那种形式
    qiayue
        6
    qiayue  
       2012-11-21 14:05:55 +08:00
    @shpasspass 那两段代码不是拿来就可以用的,你需要按照你自己的情况改改啊。
    取data其实是为了取得那个外边div的id,有了id就可以用jquery获取该元素并且进行操作。
    shpasspass
        7
    shpasspass  
    OP
       2012-11-21 15:08:27 +08:00
    @qiayue 看来太难了,我还是找点别的现成的。。。
    javaluo
        8
    javaluo  
       2012-11-21 20:01:54 +08:00
    q我帮你弄
    shpasspass
        9
    shpasspass  
    OP
       2012-11-26 13:37:57 +08:00
    @qiayue 请问这些js代码用什么工具可以找到?能简单指点一二吗?
    ispinfx
        10
    ispinfx  
       2012-11-26 13:40:04 +08:00
    不会大前端……
    linuxer
        11
    linuxer  
       2012-11-26 13:40:17 +08:00
    用firebug,或者各种现代浏览器的F12,都可以查看js。
    qiayue
        12
    qiayue  
       2012-11-26 13:45:05 +08:00
    @shpasspass 用FireFox和Chrome都可以,但是我更喜欢用Chrome。
    Chrome打开某个页面,按F12(或者空白部位右键->审查元素)调出Developer tools,你可以看到跟这个网页相关的所有东西。
    看js代码则点击“Scripts”这个tab,左上角会以下拉框的形式列出所有的含有js的文件,然后就是一个文件一个文件去看,查找关键字。
    shpasspass
        13
    shpasspass  
    OP
       2012-11-27 18:05:18 +08:00
    @qiayue 这个。。。Scripts这个tab真找不到。。。
    qiayue
        14
    qiayue  
       2012-11-27 18:09:01 +08:00
    Chrome浏览器,F12
    shpasspass
        15
    shpasspass  
    OP
       2012-11-27 18:09:19 +08:00
    @qiayue 刚找了点资料,发现Scripts已经改名字了,叫sources.....怪不得找不到。
    shpasspass
        16
    shpasspass  
    OP
       2012-11-27 18:11:22 +08:00
    @qiayue 我这chrome是21.0.1180.89版本
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3590 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:33 · PVG 12:33 · LAX 20:33 · JFK 23:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.