代码实现网页悬浮动漫小人效果

2020年4月18日 11:41 • 素材源码 • 阅读 2213

在网络上我们可以看到有些站长给网页做了一个悬浮的动漫小人，橘子君也是觉得挺好奇就研究了一下，其实网络上实现这种效果的方法有很多，如果你也想给自己的网页加一个动漫人物小人，可以参考博主的做法。

实现方法

首先确立好想在网页哪个页面做展示，找到网页对应的模板，并在<head></head>头部添加以下代码。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/spig.js"></script>
<link rel="stylesheet" href="css/spigPet.css" type="text/css"/>
<script type="text/javascript">
var isindex = true;
var visitor = true;
</script>

PS：素材已在下方可自行下载，直接上传到网站根目录即可，需要注意的是JS和CSS引用的地址不要弄错。然后在body中添加以下代码：

<!--动漫小人-->
<div id="spig" class="spig">
    <div id="message">正在加载中……</div>
    <div id="mumu" class="mumu"></div>
</div>
<!--动漫小人结束-->

效果预览

该动漫小人支持在手机端展示，点击后人物同样会漂浮，并出现人物的提示框，一般建议只给网站首页加这个动漫小人效果，文章页不建议添加，可能影响阅读，喜欢的站长可以动手试试。

[reply][button url=”https://pan.baidu.com/s/1uwDFPalhz0sM5mfQ9CED-Q” types=”down”]网盘下载[/button]提取码：twqs[/reply]

代码实现网页悬浮动漫小人效果

相关推荐