js漂浮订单信息

最新推荐文章于 2022-04-10 17:37:31 发布

原创最新推荐文章于 2022-04-10 17:37:31 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#电商 #animate #漂浮订单信息 #透明度动画 #jquery动画效果

front-end(js) 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何创建一个电商页面的漂浮订单信息显示效果，结合animate库实现透明度变化和左右移动的动画，提升购物体验。

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

1.效果图

2.实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漂浮订单</title>
    <script src="statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>

</body>
</html>

<script type="text/javascript">


    //消息弹窗
    document.writeln("<style>");
    document.writeln("#fixed{line-height:40px;height:40px;overflow:hidden; position:fixed; left:0%; bottom:50%; overflow:hidden;opacity:0;");
    document.writeln(" font-size:11px; z-index:99999;}");
    document.writeln("#fixed img,#fixed a{float:left;}");
    document.writeln("#fixed a{background:#282828;font-size:11px !important;color:#FFF !important;}");
    document.writeln("</style>");
    document.writeln("<div id=\"fixed\">");
    document.writeln("<img src=\"x1.png\">");

    document.writeln("<a id=\"f1\">湖南长沙李**抢购了两件</a>");

    document.writeln("<img src='x2.png'>");
    document.writeln("</div>");

    //显示浮动块的文本
    var toastInfos=["湖南长沙李**抢购了两件","河南郑州张**抢购了两件","北京海淀区苏**抢购了两件","云南昆明萧**抢购了两件","河北石家庄林**抢购了两件 ",
        "湖北黄冈张**抢购了两件","山东烟台张**抢购了两件","辽宁鞍山何**抢购了两件","福建福州林**抢购了两件","北京昌平朱**抢购了两件","新疆乌鲁木齐市梁**抢购了两件 ","青海西宁市蔡**抢购了两件","贵州省毕节市方**抢购了两件","四川乐山市王**抢购了两件","北京朝阳区孙**抢购了两件","吉林省长春市钟**抢购了两件","安徽省合肥市范**抢购了两件","江西省九江市苏**抢购了两件 ","山东省青岛穆**抢购了两件","上海市黄浦区孙**抢购了两件","天津市南开区韩**抢购了两件","江苏省盐城市张**抢购了两件","黑龙江牡丹江熊**抢购了两件","浙江省金华市曹**抢购了两件","甘肃省兰州市张**抢购了两件","河南省开封市刘**抢购了两件","湖北省武汉市李**抢购了两件","河南省安阳市龚**抢购了两件","江苏省南京市刘**抢购了两件","湖南省怀化市王**抢购了两件"];

    //浏览器一半高度
   // var y=window.innerHeight/2;

    function fixed1(){
        var n=parseInt(Math.random()*toastInfos.length);
        $("#f1").html(toastInfos[n]);

        //先设置display为block ——> 在设置移动到以底部为基准的65%的位置，同时透明度从0变成0.5 ——> 设置位置不变，透明度从0.5变到1 ——> 结束以后，在移动到基于底部80%的位置，同时透明度从
        //从1变到0 ——> 最后回到底部50%的位置
        $("#fixed").css({"display":"block"}).animate({"bottom":"65%","opacity":"0.5"},1500).animate({"bottom":"65%","opacity":"1"},2000,function(){
            $(this).animate({"bottom":"80%","opacity":"0"},2000,function(){
                $(this).css({"bottom":"50%"});
            })
        })

    }

    window.setInterval(fixed1,8000)


</script>