V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yumijie
V2EX  ›  JavaScript

各位大侠,有什么方法实现"拉窗帘"或者说"推门"效果……

  •  
  •   yumijie · 2015-05-11 12:59:47 +08:00 via Android · 2928 次点击
    这是一个创建于 3469 天前的主题,其中的信息可能已经有所发展或是发生改变。
    具体效果是这样的:我想把主页做成左边一半白色,右边一半黑色!左边有个用户输入框,右边一个密码输入框!输入用户名,密码!点击登录,半边白色和黑色都渐渐退出,让访客看到首页内容!
    12 条回复    2015-05-11 16:06:52 +08:00
    b821025551b
        1
    b821025551b  
       2015-05-11 13:33:25 +08:00
    coosir
        2
    coosir  
       2015-05-11 13:54:36 +08:00
    AJAX
    lzxgh621
        3
    lzxgh621  
       2015-05-11 14:14:44 +08:00
    js动画
    MaiCong
        4
    MaiCong  
       2015-05-11 14:41:54 +08:00
    我写个给你看看:
    http://codepen.io/anon/pen/rVxddV
    cxe2v
        5
    cxe2v  
       2015-05-11 14:43:25 +08:00
    用jquery的slide方法,或者animation方法
    yumijie
        6
    yumijie  
    OP
       2015-05-11 15:29:19 +08:00 via Android
    @MaiCong 我只能膜拜,谢谢
    yumijie
        7
    yumijie  
    OP
       2015-05-11 15:30:02 +08:00 via Android
    @b821025551b 谢谢,我淡入淡出效果不是我想要的
    yumijie
        8
    yumijie  
    OP
       2015-05-11 15:30:49 +08:00 via Android
    谢谢诸位!菜鸟学这个真是伤脑筋
    liuhaotian
        9
    liuhaotian  
       2015-05-11 15:54:07 +08:00
    为什么发在了 PHP 节点呢?你说拉窗帘,那么一定是在说这个了
    http://codepen.io/VEXIO/pen/xGZjbL

    @MaiCong 你的html 和css被我抄袭了
    FastMem
        10
    FastMem  
       2015-05-11 15:57:55 +08:00
    @yumijie 啊噗。。就是这个。你自己看卖葱给你实例就知道了 fadeOut fadeIn
    FastMem
        11
    FastMem  
       2015-05-11 16:05:29 +08:00
    $(function(){
    $(".btn").on('click',function() {
    $(".left-door").animate({left:'-1000px'},1000);
    $(".right-door").animate({right:'-1000px'},1000);
    $(".page-content").show();
    })
    });

    照着楼上的,我用animate写了一个
    FastMem
        12
    FastMem  
       2015-05-11 16:06:52 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   924 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 17ms · UTC 21:46 · PVG 05:46 · LAX 13:46 · JFK 16:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.