js漂浮订单信息

最新推荐文章于 2023-03-28 11:28:14 发布

小巷下起了雨

最新推荐文章于 2023-03-28 11:28:14 发布

阅读量553

点赞数

分类专栏： front-end(js) 文章标签：电商 animate 漂浮订单信息透明度动画 jquery动画效果

本文链接：https://blog.csdn.net/qq_28057577/article/details/75154847

版权

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

摘要由CSDN通过智能技术生成

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\">");