老师，请教一下！卡壳了。。。

老师，请教一下！卡壳了。。。

http://img1.sycdn.imooc.com//climg/600a2b1609d88ba615780498.jpg学了鼠标移入移出事件，自己心血来潮想模仿一下这个效果。。。。


但是突然想不出思路了，像复旦大学官网这个效果怎么做的。我理解是鼠标移入照片后，整体变长像左滑动，那么文字部分是隐藏起来了吗，等鼠标移入后显示出来？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>move</title>

    <style>

        .body{

            width: 1100px;

            margin: 0;

            padding: 0;

        }

        .box{

            position: relative;

            width: 1100px;

            height: 200px;

            background-color: rgb(243, 244, 245);

            margin: 0 auto;

            margin-top: 30px;

        }

        .title{

            position: absolute;

            bottom: 200px;

            width: 100px;

            height: 30px;

            line-height: 30px;

            border-radius: 3px;

            text-align: center;

            letter-spacing: 2px;

            background-color: rgb(11, 236, 86);

        }

        .box_content{

            width: 1100px;

            height: 200px;

            overflow: hidden;

        }

        .one{

            float: left;

            width: 420px;

            height: 200px;

            background-color: rgb(245, 31, 245);

        }

        .one_right{

            width: 200px;

            height: 200px;

            float: right;

            background-color: #fff;

        }

        .two{

            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(31, 238, 245);

            margin-left: 16px;

        }

        .thr{

            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(247, 232, 22);

            margin-left: 16px;

        }

        .fou{

            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(14, 245, 26);

            margin-left: 16px;

        }

        

    </style>

</head>

<body>

    <div class="box">

        <div class="title">

            看我移动

        </div>

        <div class="box_content">

            <div class="one">

                <div class="one_right">你好吗</div>

            </div>

            <div class="two"></div>

            <div class="thr"></div>

            <div class="fou"></div>

            <div class="fiv"></div>

        </div>

    </div>

</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">

    $(document).ready(function(){

$('.two').mouseenter(function(){

    

})

    });

</script>

</html>
慕仰7236035 2021-01-22
源自：jQuery事件   2-5 鼠标事件-mouseenter、mouseleave
26
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

4回答
好帮手慕星星 回答被采纳获得+3积分 2021-01-23 18:56:05

同学你好，jQuery中的移入显示插件效果，例如：

https://www.jq22.com/yanshi4782

推拉效果

http://img1.sycdn.imooc.com//climg/600c0077094e1be716910692.jpg

虽然实现效果和同学描述的不完全一致，但是是类似这样的插件，了解一下即可。

祝学习愉快！

0
收起回答
好帮手慕星星 2021-01-22 19:22:49

同学你好，问题解答如下：

1、第三个元素闭合标签没写，所以导致第三个嵌套着第四个。添加一下就好

http://img1.sycdn.imooc.com//climg/600a947f09eaa71a06390380.jpg

2、js上移入的时候先设置了显示，然后再设置隐藏，这是不对的

http://img1.sycdn.imooc.com//climg/600a94c50984915307260342.jpg

需要隐藏其他的文本，参考下面修改：

 $(document).ready(function() {
        // 第二个动画
        $(".two").mouseenter(function() {
            $(".two").animate({
                right: "200px"
            });
            $(".two .two_text").show().animate({
                'width': '210px'
            });
            $('.one_right .one_text').hide();
        }).mouseleave(function() {
            $('.two').animate({
                'right': '0'
            });
            $(".two .two_text").hide().animate({
                'width': '0'
            });
            $('.one_right .one_text').show();
        });
        // 第三个动画
        $(".thr").mouseenter(function() {
                $(".thr").animate({
                    right: "200px"
                });
                $(".two").animate({
                    right: "200px"
                });
                $(".thr .thr_text").show().animate({
                    'width': '210px'
                });
                // $('.thr_right .thr_text').hide();
                $('.two_right .two_text').hide();
                $('.one_right .one_text').hide();

            })
            .mouseleave(function() {
                $('.thr').animate({
                    'right': '0'
                });
                $('.two').animate({
                    'right': '200px'
                });
                $(".thr .thr_text").hide().animate({
                    'width': '0'
                });
                $('.two_right .two_text').show().animate({
                    'width': '210px'
                });
            });
        // // 第四个动画
        $(".fou").mouseenter(function() {
                $(".fou").animate({
                    right: "200px"
                });
                $(".thr").animate({
                    right: "200px"
                });
                $(".two").animate({
                    right: "200px"
                });
                $(".fou .fou_text").show().animate({
                    'width': '210px'
                });
                $('.thr_right .thr_text').hide();
                $('.two_right .two_text').hide();
                $('.one_right .one_text').hide();
            })
            .mouseleave(function() {

                $('.fou').animate({
                    'right': '0'
                });
                $('.thr').animate({
                    'right': '200px'
                });
                $('.two').animate({
                    'right': '200px'
                });
                $(".fou .fou_text").hide().animate({
                    'width': '0'
                });
                // $('.fou_right .fou_text').show();
                $('.thr_right .thr_text').show().animate({
                    'width': '210px'
                });

            });
    });

不过这样修改实现的是每一个元素挨着移入移出，跳着移入的话效果会有问题。

建议暂时先不考虑这个问题，这样的效果一般会使用插件完成，自己写的话太复杂，明白逻辑即可。

祝学习愉快！

0
收起回答
  • 提问者 慕仰7236035 #1

    像这种是属什么插件

    2021-01-23 17:53:27
好帮手慕星星 2021-01-22 11:58:28

同学你好，因提问问题不是课程中的，一般不予以解决，但是看在同学好学的份上，破例解决一次哦。

1、自己写的js代码不应该在引入jQuery文件中的script中，需要在再写一个script，否则不生效

http://img1.sycdn.imooc.com//climg/600a4c7109bce05b07840156.jpg

2、建议改变布局结构，文字部分用两个盒子嵌套，这样方便操作，例如：

http://img1.sycdn.imooc.com//climg/600a4c640978bf6406670401.jpg

3、text部分可以相对于box_content设置定位，默认隐藏，宽度为0，移入大盒子的时候text显示并改变宽度。也可以添加移出效果，如下

http://img1.sycdn.imooc.com//climg/600a4d40099c7b2b03860337.jpg​

http://img1.sycdn.imooc.com//climg/600a4d2e099f75f106640654.jpg

祝学习愉快！

0
收起回答
  • 提问者 慕仰7236035 #1 
    <!DOCTYPE html>

    <html lang="en">
      <head>
        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>move</title>

        <style>
          .body {
            width: 1100px;

            margin: 0;

            padding: 0;
          }

          .box {
            position: relative;

            width: 1100px;

            height: 200px;

            background-color: rgb(255, 254, 255);

            margin: 0 auto;

            margin-top: 30px;
          }

          .title {
            position: absolute;

            bottom: 200px;

            width: 100px;

            height: 30px;

            line-height: 30px;

            border-radius: 3px;

            text-align: center;

            letter-spacing: 2px;

            background-color: rgb(11, 236, 86);
          }

          .box_content {
            width: 1100px;

            height: 200px;

            overflow: hidden;
          }
          .box_content > div {
            position: relative;
          }

          .one {
            float: left;

            width: 420px;

            height: 200px;

            background-color: rgb(245, 31, 245);
          }

          .one_right {
            width: 200px;

            height: 200px;

            float: right;

            background-color: #fff;
          }

          .two {
            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(31, 238, 245);

            margin-left: 16px;
          }
          .two .two_text {
            position: absolute;
            top: 0;
            left: 210px;
            width: 0;
            height: 200px;
            display: none;
          }

          .thr {
            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(247, 232, 22);

            margin-left: 16px;
          }
          .thr .thr_text {
            position: absolute;
            top: 0;
            left: 210px;
            width: 0;
            height: 200px;
            display: none;
          }

          .fou {
            float: left;

            width: 210px;

            height: 200px;

            background-color: rgb(14, 245, 26);

            margin-left: 16px;
          }
          .fou .fou_text {
            position: absolute;
            top: 0;
            left: 210px;
            width: 0;
            height: 200px;
            display: none;
          }
        </style>
      </head>

      <body>
        <div class="box">
          <div class="title">看我移动</div>

          <div class="box_content">
            <div class="one">
              <div class="one_right">
                <div class="one_text">你好吗</div>
              </div>
            </div>

            <div class="two">
              <div class="two_right">
                <div class="two_text">我是内容2</div>
              </div>
            </div>

            <div class="thr">
                <div class="thr_right">
                    <div class="thr_text">我是内容3</div>
            </div>

            <div class="fou">
                <div class="fou_right">
                    <div class="fou_text">我是内容4</div>
            </div>

          </div>
        </div>
      </body>

      <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
      <script>
        $(document).ready(function () {
            // 第二个动画
          $(".two").mouseenter(function () {
            $(".two").animate({ right: "200px" });
            $(".two .two_text").show().animate({'width':'210px'});
            $('.one_right .one_text').hide();
          }).mouseleave(function(){
              $('.two').animate({'right':'0'});
              $(".two .two_text").hide().animate({'width':'0'});
              $('.one_right .one_text').show();
          });
          // 第三个动画
          $(".thr").mouseenter(function () {
            $(".thr").animate({ right: "200px" });
            $(".two").animate({ right: "200px" });
            $(".thr .thr_text").show().animate({'width':'210px'});
            $('.thr_right .thr_text').hide();
          }).mouseleave(function(){
              $('.thr').animate({'right':'0'});
              $('.two').animate({'right':'0'});
              $(".thr .thr_text").hide().animate({'width':'0'});
              $('.thr_right .thr_text').show();
          });
          // 第四个动画
          $(".fou").mouseenter(function () {
            $(".fou").animate({ right: "200px" });
            $(".thr").animate({ right: "200px" });
            $(".two").animate({ right: "200px" });
            $(".fou .fou_text").show().animate({'width':'210px'});
            $('.fou_right .fou_text').hide();
          }).mouseleave(function(){
              $('.fou').animate({'right':'0'});
              $('.thr').animate({'right':'0'});
              $('.two').animate({'right':'0'});
              $(".fou .fou_text").hide().animate({'width':'0'});
              $('.fou_right .fou_text').show();
          });
        });
      </script>
    </html>

    这里的fou样式是因为盒子设置宽度的原因吗，为什么会被挤过来了，以及这个鼠标进入和滑出事件会反复横跳，好像是会记录鼠标进入和滑出多少次，然后按照次数来实现动画

    2021-01-22 15:13:49
  • 提问者 慕仰7236035 #2

    http://img1.sycdn.imooc.com//climg/600a7d9709ee88c905150389.jpg这个fou为什么会出现在thr样式里

    2021-01-22 15:24:47
提问者 慕仰7236035 2021-01-22 09:53:38

好像我的样式应该都得position:absolute,然后

    $(document).ready(function(){

$('.two').mouseenter(function(){

    $('.two').animate({'right':'200px'})

})

    });


但还是没想通怎么出现文字那一块


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请教一下老师
23 0 12
改动了一下逻辑，球多的时候比较卡
23 0 3
老师您好，我的教学时间马上结束了
22 0 3
请教老师关于border简写
21 1 4
老师 想问一下 教学服务到期后，除了不可以提问，其他都是ok的吧
9 0 4

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师