在网络上我们可以看到有些站长给网页做了一个悬浮的动漫小人,橘子君也是觉得挺好奇就研究了一下,其实网络上实现这种效果的方法有很多,如果你也想给自己的网页加一个动漫人物小人,可以参考博主的做法。
实现方法
首先确立好想在网页哪个页面做展示,找到网页对应的模板,并在<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> <!--动漫小人结束-->
效果预览
该动漫小人支持在手机端展示,点击后人物同样会漂浮,并出现人物的提示框,一般建议只给网站首页加这个动漫小人效果,文章页不建议添加,可能影响阅读,喜欢的站长可以动手试试。