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

橘子网 261 0

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

实现方法

首先确立好想在网页哪个页面做展示,找到网页对应的模板,并在<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>
<!--动漫小人结束-->

效果预览

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

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

网盘下载提取码:twqs

上一篇:

下一篇:

相关文章

发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ