Java复习打卡day44

于 2021-05-22 13:30:15 发布
阅读量141 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51630304/article/details/117157887
版权
本文展示了jQuery在创建选项卡、导航栏、处理事件（包括鼠标移入移出、点击事件）以及实现图片放大镜和拖动效果的应用。通过示例代码详细解释了如何利用jQuery实现这些交互功能，帮助提升网页的用户体验。

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

Java复习打卡day44

jquery实例–选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li,div{margin: 0px; padding: 0px;}
        #did .header ul{list-style: none;}
        #did .header ul li{line-height: 50px; width: 120px; float: left; margin-right: 4px; background-color: #ddd;}
        #did .header ul li:hover{background-color: orange;}
        #did .body{clear: both; width: 500px; height: 400px; border: 1px solid #ddd;}
        #did .body .cc{display: none; height: 400px;}
        #did .header ul li.g1,#did .body div.g1{background-color: green;}
        #did .header ul li.r1,#did .body div.r1{background-color: red;}
        #did .header ul li.b1,#did .body div.b1{background-color: blue;}
        /* clear规定哪一侧不允许悬浮元素 */
    </style>
</head>
<body>
    <h1>jQuery实例--jQuery效果展示--选项卡</h1>
    <div id="did">
        <div class="header">
            <ul>
                <li class="g1">AAA</li>
                <li class="r1">BBB</li>
                <li class="b1">CCC</li>
            </ul>
        </div>
        <div class="body">
            <div class="cc g1"></div>
            <div class="cc r1"></div>
            <div class="cc b1"></div>
        </div>
    </div>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery的入口
    $(function(){
        //获取header 里面ul 下的所有li节点，绑定悬停事件
        $("#did .header ul li").mouseover(function(){
            //获取事件源对象li的索引
            var m = $(this).index();
            // 隐藏所有的.body div 节点
            $("#did .body div").hide();
            //显示m 索引的div 节点
            $("#did .body div").eq(m).fadeIn("slow");
        });
    });
</script>
</html>

jquery实例–导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,ul,li{margin: 0px; padding: 0px;}
        #did ul{list-style: none;}
        ul li{line-height: 15px; float: left;margin-left: 4px; background-color: #ddd;}
        ul.item li{float: none;}
        ul.item{display: none;}
        ul li:hover{background-color: lightblue;}
        a{text-decoration: none;}
    </style>
</head>
<body>
    <h1 id="hid">jquery实例--jQuery效果展示--导航栏效果</h1>
    <div id="did">
        <ul>
            <li><a href="#">商品展示</a>
                <ul class="item">
                    <li><a href="#">特卖商品</a></li>
                    <li><a href="#">最新商品</a></li>
                    <li><a href="#">特价商品</a></li>
                    <li><a href="#">推荐商品</a></li>
                </ul>
            </li>
            <li><a href="#">站内新闻</a>
                <ul class="item">
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">热击新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                </ul>
            </li>
            <li><a href="#">网站公告</a>
                <ul class="item">
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">热击新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">热击新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a>
                <ul class="item">
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">热击新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                    <li><a href="#">国际新闻</a></li>
                    <li><a href="#">热击新闻</a></li>
                    <li><a href="#">体育新闻</a></li>
                </ul>
            </li>
            <li><a href="#">在线咨询</a></li>
        </ul>
    </div>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        //获取所有的did下的ul标签的li标签,并绑定鼠标移入和鼠标移出事件
        $("#did ul li").mouseover(function(){
            //找到当前事件下的item标签并将之显示
            // $(this).find("ul.item").show();//find() 返回检索的内容

            //上面的显示太僵硬，可以使用动画的方式显示
            $("ul.item:animated").stop().hide();
            $(this).find("ul.item").slideDown("slow");
        }).mouseout(function(){
            //找到这个标签下的item标签并将之隐藏
            $(this).find("ul.item").hide();
        });
    });
</script>
</body>
</html>

jquery实例–事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="hid">jQuery实例--事件处理</h1>
    <button onclick="doFun()">点击我</button>
    <button id="bid">投票</button>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        $(function(){
            $("#bid").one("click",function(){
                alert("您已投票");
                $("#bid").html("已投票");
            });
        });
        function doFun(){
            console.log("按钮被点击了");

            //使用jquery程序激发一个事件
            $("#bid").trigger("click");//trigger 触发器
        }
    </script>
</body>
</html>

jquery实例–鼠标移入移出事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,img{margin: 0px; padding: 0px;}
        #did img{width: 384px; height: 300px;border: 2px solid #fff;}
        #list img{width: 84px; height: 80px; border: 2px solid rgb(18, 89, 243);}
        #list img:hover{border: 2px solid red;}
    </style>
</head>
<body>
    <h1>jquery实例--鼠标移入移出事件处理</h1>
    <div id="did">
        <div id="mid">
            <img src="./11.jpg">
        </div>
        <div id="list">
            <img src="./11.jpg">
            <img src="./22.jpg">
            <img src="./33.jpg">
            <img src="./44.jpg">
        </div>
    </div>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
       
        //为did绑定鼠标移入移出事件
        $("#did").mouseover(function(){
            console.log("鼠标移入……");
        }).mouseout(function(){
            console.log("鼠标移出……");
        });
        

        /*
        //上面是第一种方法，下面是第二种方法
        $("#did").hover(function(){
            console.log("鼠标移入1");
        },function(){
            console.log("鼠标移出1");
        });
        //前面的函数控制着鼠标移入事件，后面的函数控制着鼠标的移出事件
        */

        //实现图片切换的效果
        //为所有list下的img绑定鼠标移入事件
        $("#list img").hover(function(){
            $("#mid img").attr("src",$(this).attr("src"));
            //上面行代码用后面的src属性替换了前面的src属性
        });

    });
</script>
</html>

jquery实例–图片的放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,img{margin: 0px; padding: 0px;}
        #mid{width: 300px; height: 300px;overflow: hidden; display: none;position: absolute;}
    </style>
</head>
<body>
    <!-- 这段代码经过运行发现存在问题，但是在下找了半天都没有发现，如欧式有哪位大佬发现了欢迎指出 -->
    <!-- 在下找到问题所在了，原来是safari浏览器不兼容mouseover方法，换个火狐浏览器就行了 -->
    <h1>jQuery实例--图片的放大镜效果</h1>
    <!-- 放大器的原理：原本便存在一张非常大的图片，现在将它缩小显示在网页上。当浏览者的鼠标移动
    想看到放大的图片时，只要将原大图显示即可，实际上比较难的就是实现精准显示。 -->
    <br><br>
    <img id="did" src="./11.jpg" width="384px" >
    <div id="mid">
        <img src="./11.jpg">
    </div>
    <br><br>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery的入口
        $(function(){
            $("#did").mouseover(function(){
                //获取事件源对象（待放大的图片）的位置
                var offset = $(this).offset();
                //获取图片的位置
                var x = offset.left+$(this).width()+5;
                var y = offset.top;
                //利用css的特性实现放大图片的定位，并显示
                $("#mid").css({top:y+"px",left:x+"px"}).show();
            }).mouseout(function(){
                //隐藏放大图片
                $("#mid").hide();
            }).mousemove(function(e){
                //获取鼠标的位置
                // console.log(e.pageX, e.pageY);

                //获取事件源对象的位置
                var offset = $(this).offset();
                //计算得出鼠标相对于事件源对象的位置
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                //设置放大镜图层的滚动位置
                $("#mid").scrollLeft(x*5 - 150).scrollTop(y*5 - 150);
            });
        });
    </script>
</body>
</html>

jquery实例–图片的拖动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{margin: 0px; padding: 0px;}
        #did{width: 300px; height: 300px; background-color: #ddd; cursor: move; position: absolute;}

    </style>
</head>
<body>
    <h1>jquery实例--拖动效果</h1>
    <div id="did"></div>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            $("#did").mousedown(function(e){
                //设置背景颜色
                $(this).css("background-color","blue");
                //获取div层的位置
                var offset = $(this).offset();
                //获取鼠标相对于div层的位置
                var x = e.pageX-offset.left;
                var y = e.pageY-offset.top;
                //绑定鼠标移动事件
                $(document).on("mousemove",function(en){
                    $("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"});
                });
            }).mouseup(function(){
                $(this).css("background-color","#ddd");
                //取消鼠标的移动事件
                $(document).off("mousemove");
            });
        });
    </script>
</body>
</html>

jquery实例–阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{width: 400px;height: 400px;background-color: #ddd;margin: 0px;padding: 0px;}
        #inner{width: 200px;height: 200px;background-color: orange;}
    </style>
</head>
<body>
    <h1>jquery实例--阻止事件冒泡</h1>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery的入口
        $(function(){
            $("#inner").click(function(e){
                console.log("inner...");
                //阻止事件冒泡（传播）
                e.stopPropagation();
            });
            $("#outer").click(function(){
                console.log("outer...");
            });
        });
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值