鱼C论坛

 找回密码
 立即注册
查看: 2140|回复: 4

[庖丁解牛] 0 0 9 6 - 打造“切换图层”

[复制链接]
发表于 2017-3-26 17:37:19 | 显示全部楼层 |阅读模式
购买主题 已有 2 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-28 13:35:24 | 显示全部楼层
感谢楼主分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-28 21:01:36 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-22 19:02:53 | 显示全部楼层
好惨《,  没加 window.onload 也不报错, 整半天......
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-18 17:37:14 | 显示全部楼层
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{
            background: cornflowerblue;
            margin: 300px;

            font-family: "Adobe Fan Heiti Std";
            color: deeppink;

        }
        #super-page{
            /*设置整体外观*/
            background: #fff;
            width: 666px;
            box-shadow: 2px 2px 2px rgba(0,0,0,.3);
        }

        #change{
            background: #1ABC9C;
            margin: 0;
            padding: 0;
        }
        #change li{
            /*设置列表样式*/
            display: inline-block;
            list-style: none;

            width: 111px;
            height: 55px;

            line-height: 55px;
            text-align: center;
            padding-left: 77px;
        }
        #change li a{
            /*修改超链接样式*/
            display: block;
            color: #fff;
            text-decoration: none;
        }

        #content{
            padding: 22px;
        }
        #change li a.active{
            font-family: "Abadi MT Condensed Light";
            color: #e02562;
            background: #000;

        }
    </style>
</head>
<body>
    <section id="super-page">
        <div id="content">
            <article id="first">
                <p>第一个方法是,好点子应该以人为本。周其仁举了德国数学家莱布尼茨的例子,他当年花了12年,才改进了法国人原来只能做加减法的计算器,变成了可以做加减乘除。为什么莱布尼茨会做这些呢?那个时候德国没有工业化,人力成本非常低,计算对人们来说还是份不用风吹日晒的好工作。但是莱布尼茨却不这么认为,他觉得,重复性的活动不是人应该做的,人应该要去做创造性的工作,这就是我们今天说的“以人为本”的想法。想想看,我们今天很火的机器人、人工智能,最开始也是想要解放人类才研究的。</p>
            </article>

            <article id="second">
                <p>第二个方法是,好点子应该先针对一个问题,然后遵循科学原理,顺藤摸瓜找到解决办法。周其仁提到,他曾经去硅谷考察了二三十家高科技企业,考察过程当中他发现一款电子眼镜就是这么研发出来的。这款电子眼镜想解决的问题就是,帮助盲人“看”世界,当然了这个“看”是加引号的。那它遵循的科学原理是什么呢?科学家发现,人能够看见外界事物,并不是通过眼睛,眼睛只是外部图像的接收器,真正成像是在大脑。盲人的眼睛虽然丧失了功能,外部图像无法接收进来,但是大脑还是能成像的。知道了原理之后,研发者又发现,人的舌头底下是最敏感的,所以他们就通过在盲人的舌头底下夹一个电子传感器,来解决外部图像的接收问题。当然了在这当中,还有无数的细节,但比细节更重要的是你的想法。</p>
            </article>

            <article id="third">
                <p>第三个方法是,好点子是可以“平移”的,一个领域里的好点子,也许能够平移到很多不同的领域里去。举个例子,以色列周围的国家常常处于战争当中,而以色列又是个小国家,所以每天都面临着火箭炮满天飞的情况。于是以色列人发明了反火箭入侵系统,能够把经过的火箭弹打下来,还不造成其他损失。这个发明成功到什么地步呢,过去警报一响,以色列人全部都躲进防空洞。用了这个系统后,警报一响,民众反而抬头拿着手机拍天空,因为他们坚信一定能够打下来。后来这套系统经过改良,做成微型导弹放在血管里打血栓,效果也很好。所以,好的想法特别需要有抽象能力,可以平移到很多不同的领域,举一反三甚至是举一反十。</p>
            </article>

        </div>


        <ul id="change">
            <li><a href="#first" id="change-first">第一阶段</a></li>
            <li><a href="#second" id="change-second">第二阶段</a></li>
            <li><a href="#third" id="change-third">第三阶段</a></li>
        </ul>
    </section>
    <script type="text/javascript">
        var js_first=document.getElementById("change-first");
        var js_second=document.getElementById("change-second");
        var js_third=document.getElementById("change-third");
        var first=document.getElementById("first");
        var second=document.getElementById("second");
        var third=document.getElementById("third");

        //设置second和third初始状态不显示
        second.style.display = "none";
        third.style.display = "none";

        //设置change-first初始状态为被点击效果
        js_first.className = "active";

        js_first.onclick = function(){
            hideAll();
            first.style.display = "block";
            js_first.className = "active";
        }

        js_second.onclick = function(){
            hideAll();
            second.style.display = "block";
            js_second.className = "active";
        }
        js_third.onclick = function(){
            hideAll();
            third.style.display = "block";
            js_third.className = "active";
        }

        function hideAll(){ //将所有内容都设置为隐藏,所有链接的样式类都清除
            first.style.display = "none";
            second.style.display = "none";
            third.style.display = "none";

            js_first.className = "";
            js_second.className = "";
            js_third.className = "";
        }
    </script>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 09:22

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表