jQuery 实例（计算器、轮播图、ajax等）

抹泪的知更鸟

已于 2022-04-11 10:29:52 修改

阅读量731

点赞数 1

分类专栏： jQuery+BootStrap+VUE 文章标签：前端前端框架 vue.js

于 2022-03-28 15:29:49 首次发布

本文链接：https://blog.csdn.net/qq_51596354/article/details/123796563

版权

前端实例

1.加载练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加载练习</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <style>
        * {
     
            margin: 0;
            padding: 0
        }
        .load_point{
     
            margin: 30px;
        }
        #container {
     
            text-align: center;
            font-size: 30px;
            color: dodgerblue;
            letter-spacing: 2px;
            font-family: "Times New Roman", serif;
        }

        .move {
     
            height: 3px;
            background: url('image/2.jpg');
            width: 520px;
            position: relative;
            margin: 10px auto;
        }

        .move img {
     
            position: absolute;
            left: 40px;
            top: -6px;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="load_point">
        加载中
        <span>.</span>
        <span>.</span>
        <span>.</span>
    </div>
    <div class="move">
        <img src="image/1.jpg"/>
    </div>
</div>


<script>
    let speed = 50;//移动的速度
    //光点滑动
    function imgMove() {
     
        speed++;
        if (speed > 450) {
     
            speed = 50;
        }
        $(".move img").css("left", speed);
    }

    setInterval(imgMove, 5);

    let point = $(`.load_point span`);
    //加载后面三个点的动画效果
    function pointMove(i) {
     
        point.css("color", "white");
        point.each(function (i) {
     
            setTimeout(function () {
     
                point.eq(i).css("color", "#29B6FF")
            }, i * 300)
        })
    }

    setInterval(pointMove, 900);
</script>
</body>
</html>

效果展示

(C:!在这里插入图片描述

2.评价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品评价练习</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    * {
     
        margin: 0;
        padding: 0;
    }

    .star {
     
        text-align: center;
        border: 2px solid bisque;
        width: 420px;
        margin: 10px auto;
        border-radius: 10px;
    }

    .star ul {
     
        list-style: none;
        overflow: hidden;
    }

    .star ul li {
     

        -webkit-user-select: none;
        float: left;
        padding: 10px;
    }

    .star ul li:first-child {
     
        background-color: bisque;
    }

    .star ul li span {
     
        background-color: gainsboro;
        padding: 5px 10px;
        border-radius: 50px;
        cursor: pointer;
        color: white;
    }

    .star ul input {
     
        width: 40px;
        border-radius: 50%;
        text-indent: 15px;
        border-color: bisque;
        outline: none;
        margin: 5px 0 0 0;
        padding: 5px 0;
    }

</style>
<body>
<div id="container">
    <div class="star">
        <ul>
            <li>商品评价:</li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <input type="text" value="0">
        </ul>
    </div>
    <div class="star">
        <ul>
            <li>商品评价:</li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <input type="text" value="0">
        </ul>
    </div>
    <div class="star">
        <ul>
            <li>商品评价:</li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <li><span>★</span></li>
            <input type="text" value="0">
        </ul>
    </div>
</div>
<script>
    $(" ul li").click(function () {
     
        let num = $(this).index();
        $(this).siblings("input").val(num);
        $(this).children().css("color", "red");
        $(this).nextAll().children().css("color", "white");
    })
    $('ul li').mouseover(function () {
     
        $(this).children('span').css("color", "red");
        $(this).prevAll('li').children().css("color", "red");
        $(this).nextAll('li').children().css("color", "white");

    });
    $('ul li').mouseout(function () {
     
        $(this).children('span').css("color", "white");
        $(this).nextAll('li').children().css("color", "white");
        $(this).children('span').css("color", "red");

        let inputNum = $(this).siblings("input").val();
        let moveNum = $(this).index();
        if(moveNum>inputNum){
     
            $(this).parent().children().eq(inputNum).nextAll().children().css("color","white");
        }else {
     
            $(this).parent().children().eq(inputNum).prevAll().children().css("color","red");
            $(this).parent().children().eq(inputNum).children().css("color","red")
        }
    });
</script>
</body>
</html>

效果展示

在这里插入图片描述

3.手风琴菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴菜单</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    * {
     
        margin: 0;
        padding: 0;
    }

    #container {
     
        width: 300px;
        text-indent: 10px;
        letter-spacing: 10px;
        background-color: gainsboro;
    }

    .menu {
     
        font-size: 20px;
        cursor: pointer;
        -webkit-user-select: none;
        color: gray;
    }

     a {
     
        text-decoration: none;
        color:black;
    }

    .list-first > div {
     
        background-color: lightgray;
        font-size: 25px;

    }
    .list-first div:before{
     
        content: "▶";
    }
    .list-first div:after{
     
        content: "△";
        margin-left: 80px;
    }
    .list-first:hover div:before{
     
        content: "▼";

    }
    .list-first:hover div:after{
     
        content: "▽";
    }
    .list-first div.active:after{
     
        content: "▽";
        margin-left: 80px;
    }

    #menu-name {
     
        text-align: center;
        font-size: 30px;
        color: cornflowerblue;
        padding: 10px;
        font-weight: bolder;
        background-color: darkgrey;
    }

    ul {
     
        list-style: none;
    }

    .list-item2 li {
     
        text-indent: 50px;
        padding: 5px;
        border-bottom: lightgray 2px solid;
    }
    .list-item2{
     
        display: none;
    }

    .list-first:hover>ul{
     
        display: block;
    }
    .list-first ul li:hover{
     
        background-color: lightgray;
    }
    .list-first div:hover{
     
        background-color: lightsteelblue;
    }
    .active{
     
        display: block;
    }
</style>
&

最低0.47元/天解锁文章

抹泪的知更鸟

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 实例（计算器、轮播图、ajax等）

前端实例jQuery实例前端实例1.加载练习效果展示2.评价效果展示3.手风琴菜单效果展示4.选项卡效果展示5.键盘输入效果展示6.轮播移动1效果展示7.轮播移动2效果展示8.Ajax前后端交互效果展示9.计算器效果展示10.变身小怪兽效果展示11.时间实时显示效果展示VUE实例1.走马灯效果展示1.加载练习<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>
复制链接

扫一扫