购物车的大体框架，点击购物图标弹出隐藏购物车

最新推荐文章于 2024-04-30 12:30:00 发布

暗诡刺

最新推荐文章于 2024-04-30 12:30:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript HTML

本文链接：https://blog.youkuaiyun.com/anxin591025/article/details/38537831

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

本博客介绍了一个用于下载图片、视频和音频的JavaScript工具，包括如何使用DOM操作实现元素定位、显示隐藏功能，以及如何创建购物车式的下载体验。

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

<script type="text/javascript">
            $(function () {
                var logo_div_y = 70;
                var logo_div_x = 1408;
                $("#shoppingtrolley_div").css({ "position": "fixed", "top": logo_div_y + "px", "left": logo_div_x + "px" });
                $("#shipin_div,#yinpin_div").css({ "display": "none" });
                $(".content_div div").css({ "background-color": "#fff" });
                $("#tupian_btn").click(function () {
                    $("#shipin_div,#yinpin_div").slideUp();
                    $("#tupian_div").slideDown(function () { $("#tupian_div").css({ "overflow-y": "scroll" }); });
                });
                $("#shipin_btn").click(function () {
                    $("#tupian_div,#yinpin_div").slideUp();
                    $("#shipin_div").slideDown(function () { $("#shipin_div").css({ "overflow-y": "scroll" }); });
                });
                $("#yinpin_btn").click(function () {
                    $("#tupian_div,#shipin_div").slideUp();
                    $("#yinpin_div").slideDown(function () { $("#yinpin_div").css({ "overflow-y": "scroll" }); });
                });


                var logo_y = 620;
                var logo_x = 1600;
                var logo_width = 50;
                var logo_height = 50;
                $("#gouwuche_div_logo").css({ "top": logo_y + "px", "left": logo_x + "px", "width": logo_width + "px", "height": logo_height + "px" });
                $("#gouwuche_div_logo").click(function () {
                    if ($("#shoppingtrolley_div").css("display") == "none") {
                        $("#shoppingtrolley_div").css({ "displya": "block", "top": (logo_y - 0 + (logo_height / 2)) + "px", "left": (logo_x - 0 + (logo_width / 2)) + "px", "width": "0px", "height": "0px" });
                        $("#shoppingtrolley_div").animate({ "top": logo_div_y + "px", "left": logo_div_x + "px", "width": "209px", "height": "529px" });
                    }
                    else {
                        $("#shoppingtrolley_div").animate({ "top": (logo_y - 0 + (logo_height / 2)) + "px", "left": (logo_x - 0 + (logo_width / 2)) + "px", "width": "0px", "height": "0px" }, function () {
                            $("#shoppingtrolley_div").css({ "display": "none" });
                        });
                    }
                });
            });

        </script>
        <div style="width: 209PX; border: 1px solid #eee; height: 529px; background-color: #60BFF2;overflow:hidden;"
            id="shoppingtrolley_div">
            <div style="height: 44px;padding-left: 8px; padding-right: 8px;" id="shopping_title" onclick="mousersatart(this)">
                下载文件
            </div>
            <div style="height: 352px; padding-left: 8px; padding-right: 8px;">
                <div class="content_div">
                    <div style="height: 29px;" id="tupian_btn">
                        已选图片
                    </div>
                    <div style="margin-top: 1px; height: 262px; overflow-y: scroll;" id="tupian_div">
                        图片
                    </div>
                </div>
                <div class="content_div">
                    <div style="height: 29px; margin-top: 1px" id="shipin_btn">
                        已选视频
                    </div>
                    <div style="margin-top: 1px; height: 262px; overflow-y: scroll;" id="shipin_div">
                        视频
                    </div>
                </div>
                <div class="content_div">
                    <div style="height: 29px; margin-top: 1px;" id="yinpin_btn">
                        已选音频
                    </div>
                    <div style="margin-top: 1px; height: 262px; overflow-y: scroll;" id="yinpin_div">
                        音频
                    </div>
                </div>
            </div>
            <div style="padding-left: 8px; padding-right: 8px;">
            <textarea placeholder="下载说明" style="height:70px;width:187px;"></textarea>
            </div>
            <center>
            <input type="button" value="打包下载" />
            </center>
        </div>
        <div id="gouwuche_div_logo" style=" background-color: #000; position: fixed;">
        <span style="color:#fff;font-size:30;">GO</span>
        </div>