jq动画

最新推荐文章于 2022-12-15 11:55:09 发布

等待戈多的莱昂纳多

最新推荐文章于 2022-12-15 11:55:09 发布

阅读量201

点赞数

分类专栏：库，框架。

本文链接：https://blog.csdn.net/weixin_44892520/article/details/101851640

版权

库，框架。专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jq横向轮播


```javascript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            position: relative;
            width: 500px;
            height: 300px;
            margin: auto;
            overflow: hidden;
        }

        .banner {
            width: 3000px;
            height: 300px;
        }

        .banner > li {
            list-style: none;
            float: left;
            width: 500px;
            height: 300px;
        }

        .banner > li > img {
            width: 500px;
            height: 300px;
        }

        .block > a {
            display: block;
            position: absolute;
            width: 40px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: grey;
            color: #fff;
        }

        .block > a:nth-child(1) {
            left: 0;
            top: 120px;
        }

        .block > a:nth-child(2) {
            right: 0;
            top: 120px;
        }

        .pos {
            position: absolute;
            width: 500px;
            height: 20px;
            left: 0;
            bottom: 0;
            text-align: center;
        }

        .pos > div {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-sizing: border-box;
        }

        .color {
            background: red;
        }
    </style>
</head>
<body>
<div class="block">
    <a>左</a>
    <a>右</a>
    <ul class="banner">
        <li><img src="./img/1.jpg" alt=""/></li>
        <li><img src="./img/2.jpg" alt=""/></li>
        <li><img src="./img/3.jpg" alt=""/></li>
        <li><img src="./img/4.jpg" alt=""/></li>
        <li><img src="./img/5.jpg" alt=""/></li>
    </ul>
    <div class="pos">
        <div class="color"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        var num = 0;
        var timer;
        var timeend = 0;
        $(".banner").children().eq(0).clone(true).appendTo($(".banner"));
        $(".block").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(function () {
                showanimate();
            }, 1200);
        }).trigger("mouseleave");
        function showanimate() {
            num++;
            $(".banner").stop().animate({
                marginLeft: -500 * num
            }, 700, function () {
                //判断
                if (num >= $(this).children().length - 1) {
                    $(this).css({
                        marginLeft: 0
                    });
                    num = 0;
                }
                $(".pos>div").eq(num).addClass("color").siblings().removeClass();
            });
        }

        $(".block>a").each(function (index) {
            $(this).click(function (e) {
                if (e.timeStamp - timeend >= 700) {
                    timeend = e.timeStamp;
                    if ($(this).html() == "左") {
                        showanimate();
                    }
                    else {
                        //num
                        num--;
                        if (num < 0) {
                            num = $(".banner").children().length - 2;
                            $(".banner").css({
                                marginLeft: -2500
                            });
                        }
                        $(".banner").animate({
                            marginLeft: -500 * num
                        }, 700);

                    }
                }

            });
        });
        $(".pos>div").each(function (index) {
            $(this).mouseover(function () {
                $(this).addClass("color").siblings().removeClass();
                $(".banner").stop().animate({
                    marginLeft: -500 * index
                }, 700);
            });
        });
    });
</script>
</body>
</html>

外卖系统

```javascript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>点外卖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .header {
            height: 30%;
            background: #f4f3ff;
        }

        .w {
            width: 100%;
            height: 70%;
            display: flex;
            flex-direction: row;
            border: 1px solid silver;
            box-sizing: border-box;
        }

        .w_left {
            flex: 1;
            overflow: hidden;
            border-right: 1px solid silver;
        }

        .w_menu {
            width: 110%;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .w_right {
            flex: 3;
            position: relative;
        }

        .w_rmenu {
            width: 110%;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .leftmenu {
            width: 100%;
            height: 120%;
            display: flex;
            flex-direction: column;
        }

        .leftmenu > li {
            list-style: none;
            flex: 1;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 10%;
            border-bottom: 1px solid silver;

        }

        .leftcolor {
            background: #dddddd;
            color: red;
        }

        .w_rmenu > div > ul {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        .w_rmenu > div > ul > li {
            list-style: none;
            height: 100px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 10%;
            border-bottom: 1px solid silver;
        }
    </style>
</head>
<body>
<div class="header">

</div>
<div class="w">
    <div class="w_left">
        <div class="w_menu">
            <ul class="leftmenu">
                <li class="leftcolor">热销</li>
                <li>折扣</li>
                <li>必点</li>
                <li>素菜</li>
                <li>荤菜</li>
                <li>饮料</li>
                <li>主食</li>
                <li>套餐</li>
            </ul>
        </div>
    </div>
    <div class="w_right">
        <div class="w_rmenu">
            <div>
                <ul>
                    <li>热销</li>
                    <li>热销</li>
                </ul>
                <ul>
                    <li>折扣</li>
                    <li>折扣</li>
                    <li>折扣</li>
                    <li>折扣</li>
                </ul>
                <ul>
                    <li>必点</li>
                    <li>必点</li>
                </ul>
                <ul>
                    <li>素菜</li>
                    <li>素菜</li>
                    <li>素菜</li>
                    <li>素菜</li>
                    <li>素菜</li>
                </ul>
                <ul>
                    <li>荤菜</li>
                    <li>荤菜</li>
                    <li>荤菜</li>
                    <li>荤菜</li>
                    <li>荤菜</li>
                </ul>
                <ul>
                    <li>饮料</li>
                    <li>饮料</li>
                </ul>
                <ul>
                    <li>主食</li>
                </ul>
                <ul>
                    <li>套餐</li>
                    <li>套餐</li>
                    <li>套餐</li>
                    <li>套餐</li>
                    <li>套餐</li>
                    <li>套餐</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        $(".leftmenu>li").each(function (index) {
            $(this).click(function () {
                $(this).addClass("leftcolor").siblings().removeClass();
                var oftop = $(".w_rmenu>div>ul").eq(index).position().top + $(".w_rmenu").scrollTop();
                $(".w_rmenu").stop().animate({
                    scrollTop: oftop
                }, 400);
            });
        });
        $(".w_rmenu").on("scroll", function () {
            var sctop = $(this).scrollTop();
            $(this).find("ul").each(function (index) {
                var uloftop = $(this).position().top + sctop;
                var ulheight = $(this).height();
                if (sctop >= uloftop && sctop <= uloftop + ulheight) {
                    $(".leftmenu>li").eq(index).addClass("leftcolor").siblings().removeClass();
                    if (index >= $(".leftmenu>li").length / 2) {
                        $(".w_menu").scrollTop(1000);
                    }
                    else {
                        $(".w_menu").scrollTop(0);
                    }
                }
            });
        });
    });
</script>
</body>
</html>

等待戈多的莱昂纳多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq动画

jq横向轮播```javascript<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; ...
复制链接

扫一扫

专栏目录