网页浮动小人特效

          阅读(89)

    网页浮动小人特效

    今天呢,博主教大家给我们的wp页面添加一个可耐滴浮动小人。当然咯,不一定要是wp,其他网页上也是可以添加的。

     

    <1.wp插件-伪春菜>

    下载链接:weichuncai

    也可以直接在wp后台插件搜索:weichuncai ?安装即可

    简单配置就OK了

    但是博主不推荐使用插件,毕竟插件会拖慢博客速度。还是纯代码来的好。

    <2.代码版>

    1.确保已加载JQuery库

    2.把spig.js和spig.phg放在网站任意目录

    3.把下面代码加入到”footer.php”文件的body里(</head>前)

    注意修改spig.js与spig.png的实际路径哦

    ?<!–.浮动小人–>
    <script type=“text/javascript “>
    <?php if(is_home()) echovar isindex=true;var title=“”;’;else?echovar isindex=false;var title=“‘,? get_the_title(),'”;’; ?>
    <?php if((($display_name = wp_get_current_user()->display_name) != null)) echovar visitor=“‘,$display_name,'”;’; else?if(isset($_COOKIE[‘comment_author_’.COOKIEHASH])) echovar visitor=“‘,$_COOKIE[‘comment_author_’.COOKIEHASH],'”;’;else?echovar visitor=“游客”;’;echo?“\n”; ?>
    </script>
    <script type=“text/javascript” src=“http://www.ferline8.com/spig.js”></script>
    <style>
    .spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;z-index:9999;}
    #message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-45px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
    .mumu{width:130px;height:170px;cursor: move;background:url(http://www.ferline8.com/wp-content/themes/KooBox/images/spig.png) no-repeat;}
    </style>
    <div id=“spig”?class=“spig”>
    ??? <div id=“message”>加载中……</div>
    ??? <div id=“mumu”?class=“mumu”></div>
    </div>
    <!–.end浮动小人–>
    <span class=“hitokoto” id=“hitokoto” style=“display:none”>Loading…</span>
    ?? <div id=“hjsbox” style=“display:none”>
    ??? </div>
    <script>
    ??????? //初始化一言
    ??????? setTimeout(“getkoto()”,1000);
    ??????? //加载一言
    ??????? var t;
    ??????? function getkoto(){
    ??????????? var hjs = document.createElement(‘script’);
    ??????????? hjs.setAttribute(‘id’, ‘hjs’);
    ??????????? hjs.setAttribute(‘src’, ‘http://api.hitokoto.us/rand?uid=3221&encode=jsc&fun=echokoto’);
    ??????????? document.getElementById(“hjsbox”).appendChild(hjs);
    ??????????? t=setTimeout(“getkoto()”,2000);
    ??????? }
    ??????? //输出一言
    ??????? function echokoto(result){
    ??????????? var hc = eval(result);
    ? ? ? ? ? ?//$(“#hitokoto”).fadeTo(300,0);
    ??????????? document.getElementById(“hitokoto”).innerHTML = hc.hitokoto;
    ??????????? //$(“#hitokoto”).fadeTo(300,0.75);
    ??????? }
    </script>

    4.注意改下代码哦~

    spig.js中10行、57行改为自己的网站

    上面代码第10行修改width/height参数

    停留位置148行、243行s参数

    2016-08-25 17:01:19


    喜欢 0



还没有人抢沙发呢~

加载中……