欢迎使用CSDN-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

SmartJdbc

最新推荐文章于 2021-01-07 23:01:28 发布

阅读量462

点赞数

分类专栏：前端基础文章标签： html 编辑器测试底部返回

本文链接：https://blog.csdn.net/SmartJdbc/article/details/75576936

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现图片

html 部分

<!DOCTYPE html>
<html>
<!--
    作者：smartxia
    时间：2017-07-20
    描述：用于测试底部返回的demo
-->
    <head>
        <link rel="shortcut icon" href="img/favicon.ico" />
        <meta charset="utf-8" />
        <title>开心餐厅</title>
    </head>
    <style>
        p {
            font-size: 12px;
        }

        h1 {
            color: green;
        }

        h3 {
            color: red;
        }

        .blue {
            color: blue;
        }

        #first {
            color: green;
        }

        #p {
            width: 99%;
        }
    </style>

    <body>
        <img src="img/game01.jpg" id="p" /><br>
        <img src="img/game02.jpg" />
        <div id="first">
            <p>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。</p>
            <p>烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
            <p>步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
        </div>
        <img src="img/game03.jpg">
        <h1>如何做菜？</h1>
        <p>1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；</p>
        <p>2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；</p>
        <p>3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；</p>
        <p>4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。</p>
        <h3>如何经营餐厅？</h3>
        <p>1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；</p>
        <p>2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加</p>
        <p>3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。</p>
        <h3>如何吸引顾客？ </h3>
        <p>1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；</p>
        <p>2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度； </p>
        <p>3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！</p>
        <h3>如何和好友互动？</h3>
        <p>1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；</p>
        <p>2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的；</p>
        <p>3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；</p>
        <p>4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。 </p>
        <img src="img/game04.jpg" />
        <p class="blue">开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。</p>
        <p class="blue">烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。</p>
        <p class="blue"> 步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>
        <button class="gototop"><span>返回顶部</span></button>
        <link rel="stylesheet" href="css/button.css">
        <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.gototop.min.js"></script>
                                                        <!--
                                                            作者：offline
                                                            时间：2017-07-20
                                                            描述：加载按钮返回首页运行js文件
                                                            引用了button.css内容来控制按钮动画漂浮状态
                                                        -->
        <script type="text/javascript">
            $(function() {
                // $(".gototop").gototop();
                $(".gototop").gototop({
                    position: 0,
                    duration: 1250,
                    visibleAt: 300,
                    classname: "isvisible"
                });
            });
        </script>
    </body>

</html>

js 部分

/*
 * */
! function(o, t, i, n) {
    "use strict";
    o.gototop = function(n, s) {
        var e = 0,
            l = o("html, body"),
            a = this;
        a.$el = o(n), a.el = n, a.$el.data("gototop", a), a.initialize = function() {
            a.options = o.extend({}, o.gototop.defaultOptions, s), a.listen()
        }, a.listen = function() {
            t.addEventListener("scroll", a.getScrollPosition, !1), a.$el.on("click", {
                position: a.options.position,
                duration: a.options.duration
            }, a.scrolltotop)
        }, a.getScrollPosition = function() {
            e = i.body.scrollTop || t.pageYOffset, a.checkPosition()
        }, a.checkPosition = function() {
            e >= a.options.visibleAt ? (a.$el.show(), a.$el.addClass(a.options.classname)) : a.$el.removeClass(a.options.classname)
        }, a.scrolltotop = function(o) {
            l.animate({
                scrollTop: o.data.position
            }, o.data.duration)
        }, a.initialize()
    }, o.gototop.defaultOptions = {
        position: 50,
        duration: 3e3,
        classname: "isvisible",
        visibleAt: 500
    }, o.fn.gototop = function(t) {
        return this.each(function() {
            new o.gototop(this, t)
        })
    }
}(jQuery, window, document);

==注意自己jQuery的库的使用最新的加载==

SmartJdbc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
欢迎使用CSDN-markdown编辑器

html 部分<!DOCTYPE html><html> <head> <link rel="shortcut icon" href="img/favicon.ico" /> <meta charset="utf-8" />
复制链接

扫一扫

专栏目录