网页添加精灵代码

<style>
.spig {
display:block;
width:175px;
height:246px;
position:absolute;
bottom: 300px;
left:180px;
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:175px;
height:246px;
cursor:move;
background:url(http://files.cnblogs.com/files/flipped/spig.gif) no-repeat;
}
</style>


<script src="https://blog-static.cnblogs.com/files/ambitionutil/spig.js"></script>
<script src="http://files.cnblogs.com/files/flipped/spig.js"></script>
<!--博客精灵 start*-->
<div id="spig" class="spig">
<div id="message">……</div>
<div id="mumu" class="mumu"></div>
</div>

<script type="text/javascript">
var isindex=true;
var title="";
var visitor="这位客官";
</script>
<!--精灵end*-->

 

如果想修改精灵图标,只需要找一个gif将代码中的gif换一下即可

posted @   驰网飞飞  阅读(113)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
欢迎这位客官来到《网页添加精灵代码 - 驰网飞飞 - 博客园》
点击右上角即可分享
微信分享提示