拖拽,hover,动画常用属性

最新推荐文章于 2024-08-30 16:01:55 发布

原创最新推荐文章于 2024-08-30 16:01:55 发布 · 827 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端的尘封往事专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨了jQuery库中用于创建拖拽效果、悬停响应及流畅动画的关键属性。通过实例代码，详细解释了如何利用这些属性实现用户交互，提升网页动态体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽,hover,动画</title>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

    <!-- <style type="text/css">
        div{width: 100px;height: 100px;background: red;position: absolute;}
    </style>

    <script type="text/javascript">
    //jquery写拖拽
    $(function(){
        var disx=0;
        var disy=0;
        $('div').mousedown(function(ev){
            disx=ev.pageX-$(this).offset.left;
            disy=ev.pageY-$(this).offset.top;
        })
        $(document).mousemove(function(ev){
                $('div').css('left',ev.pageX-disx);
                $('div').css('top',ev.pageY-disy);
            })
        $(document).mouseup(function(){
            $(document).off();
        })
        return false;
    })
    </script> -->


    <!--
     hover():当鼠标触碰是发生的事件，第一个参数是当触碰时发生的 ，第二个参数是鼠标移开是发生的事件
     运动效果：
     hide():隐藏,里面有数字可以表示时间
     show():显示
     fadeOut():淡出，里面有数字可以表示时间
     fadeIn():淡入
     fadeTo():也是淡入淡出，第一个参数是时间，第二个是透明度 0~1
     slideUp():向上收起折叠，里面有数字可以表示时间 1~1000，默认400
     slideDown()：向下放出
      -->
    <style type="text/css">
    #div1{width: 100px;height: 100px;background: red}
    #div2{width: 100px;height: 100px;background: yellow}
    </style>
    <script type="text/javascript">
    $(function(){
        $('#div1').hover(function(){
            //$(this).css('background',"blue");
            //$('#div2').hide(1000);
            //$('#div2').fadeOut(3000);
            //$('#div2').slideUp();
            $('#div2').fadeTo(1000,0.5);
        },function(){
            //$(this).css('background',"red");
            //$('#div2').show(1000);
            //$('#div2').fadeIn(3000);
            //$('#div2').fadeTo(3000);
            //$('#div2').slideDown();
            $('#div2').fadeTo(1000,1);

        });
    });
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>