itanℒ
2019-07-13 15:57
采纳率: 64.1%
浏览 478

css鼠标触摸实现过渡效果.........

图片说明

最开始图片是这样的

图片说明

鼠标触摸上去 右边来了一张比较大的图片

图片说明

这个效果是 鼠标触摸在小图片上 右边出现一张大图 并且小图片从上到下会有一个灰色的背景从上到下慢慢出来的过渡效果 问题就是这 请大佬给予详细代码我粘贴复制到开发工具中看效果 谢谢 !

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 一只成序源 2019-07-15 09:16
    已采纳
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style>
            #img1{
                width:50px;
                height: 50px;
            }
            #mask{
                width: 50px;
                height: 50px;
                background: rgba(0,0,0,0.7);
                text-align: center;
                line-height: 50px;
                color: white;
                position: absolute;
                display: none;
            }
    
            #img2{
                width: 200px;
                height: 200px;
            }
            #div2{
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.11.0.js" ></script>
        <body>
            <div id="div1">
                <div id="mask">id:128</div>
                <img id="img1" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
            </div>
            <div id="div2">
                <img id="img2" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
            </div>
    
        </body>
        <script>
            $(function(){
                $("#img1").mouseover(function(){
                    $("#mask").slideDown("slow");
                    $("#div2").css("display","block");
                });
                $("#mask").mouseout(function(){
                    $("#mask").slideUp("slow");
                    $("#div2").css("display","none");
                });
            })
        </script>
    </html>
    
    
    打赏 评论

相关推荐 更多相似问题