个人中心
gpt4 book ai didi

javascript - 如何在点击时在上/左/右/下方向滑动一个div

转载 作者：行者123 更新时间：2023-11-28 12:17:09 26 4
gpt4 key购买 nike

我需要在所有方向上动画、滑动、转换页面。

我有一个页面，其中一个容器在底部包含三个不同的内部容器，在顶部包含一个。首先是绿色背景颜色的左侧容器。第二个是红色背景颜色的中间容器。第三个是蓝色背景色的右侧容器。和顶部容器有黑色背景颜色。在中间容器中，我有三个链接。这就是“我们是谁”、联系我们以及我们做什么。

我需要

当我点击我们是谁时...左侧容器应该向右移动，当我点击我们是谁按钮时...左侧容器应该向左侧移动。

现在在联系我们链接上，我需要为底部的中间容器设置动画......使用切换盒

关于我们要做的事情，我需要用切换效果为左侧的右侧容器设置动画。

这是我的CSS

body
{
    width:100%;
    height:auto;
}
*{margin:0px; padding:0px;}
.wrapper
{
    width:1366px;
    height:auto;
    margin:0 auto;
    overflow:hidden;
}
.contentwrapper
{
    width:4098px;
    height:665px;
    margin-left:-1366px;
    float:left;
    background:#ccc;
    position:relative;
}
.topbox
{
    width:1366px;
    height:665px;
    margin:-665px auto 0px auto;
    background:#000;
}

.inner-wrapper
{
    width:1366px;
    height:665px;
    float:left;
}

.bg1
{
    background:#9C0;
}
.bg2
{
    background:url(../images/back1.jpg) center;
}
.bg3
{
    background:#009;
}


.box1
{
    width:280px;
    height:295px;
    float:left;
    background:url(../images/logo_line.png) no-repeat;
}
.box2
{
    width:280px;
    height:295px;
    float:left;
    background:url(../images/logo_line.png) no-repeat;
}
.box3
{
    width:280px;
    height:295px;
    float:left;
    background:url(../images/logo_line.png) no-repeat;
}

这里是html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AR</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script  type="text/javascript">
$("#toright").ready(function(){
    var m=0, dir=true;

    $("#toright").click(function() {
        dir = !dir;
        m = dir? -500 : 0;
        $(".contentwrapper").stop().animate({right: m+'px'}, 800);
    });
});
</script>

<script  type="text/javascript">
$("#toleft").ready(function(){
    var m=0, dir=true;

    $("#toleft").click(function() {
        dir = !dir;
        m = dir? -500 : 0;
        $(".contentwrapper").stop().animate({left: m+'px'}, 800);
    });
});
</script>

<script  type="text/javascript">
$("#totop").ready(function(){
    var m=0, dir=true;

    $("#totop").click(function() {
        dir = !dir;
        m = dir? -500 : 0;
        $(".contentwrapper").stop().animate({bottom: m+'px'}, 800);
    });
});
</script>


</head>

<body>
<div class="wrapper">
    <div class="contentwrapper">

        <div class="topbox"></div><!--top black box -->

        <div class="inner-wrapper bg1"></div><!--left box -->

        <div class="inner-wrapper bg2"> <!--middle box -->
            <a href="#" class="box1" id="toright"><span>Who We Are</span></a>
            <a href="#" class="box2" id="totop"><span>Contact Us</span></a>
            <a href="#" class="box3" id="toleft"><span>What We Do</span></a>
        </div>

        <div class="inner-wrapper bg3"></div> <!--right box -->
    </div>
</div>
</body>
</html>

最佳答案

您可以使用 jQuery UI toggle() 动画:http://jqueryui.com/toggle/

文档:http://api.jqueryui.com/slide-effect/

关于javascript - 如何在点击时在上/左/右/下方向滑动一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19099679/

26 4 0
文章推荐： javascript - 有多少 CSS3 可以通过 javascript 访问？
文章推荐： html - float 元素永远不能离开 div
文章推荐： javascript - 如何添加到现有属性？
文章推荐： css - 当从另一台服务器提取数据时如何使网站移动响应
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com