一个来自迅雷下载页面右下角的点击
以下是HTML代码
<code>
<div class="bot_tips mini_tips" style="width: 130px; height: 120px; cursor: pointer; display: block;">
这里是点击前显示的图片
<img decoding="async" src="http://img.kuai.xunlei.com/img/v2/tips_right.gif" width="130" height="120" border="0">
</div>
<div class="bot_tips bot_tips_t" style="width: 252px; height: 160px; margin-right: 10px; margin-bottom: 10px; display: none;">
<div class="kc_tips">
<div class="tips_hd" style="margin-bottom:-10px"><h4>快传推荐</h4><a class="mini_btn" href="javascript:;" title="最小化"><span class="mini"></span></a></div>
<div class="adv_area" style="width:248px;height:133px"><a href="#" target="_blank" class="chkembed"><img decoding="async" loading="lazy" src="http://img.kuai.xunlei.com/img/v2/fen/f86ac821c3efc81564298eef612de1de.png" width="248" height="133"></a></div> </div>
</div>
</code>
<div class="bot_tips mini_tips" style="width: 130px; height: 120px; cursor: pointer; display: block;">
这里是点击前显示的图片
<img decoding="async" src="http://img.kuai.xunlei.com/img/v2/tips_right.gif" width="130" height="120" border="0">
</div>
<div class="bot_tips bot_tips_t" style="width: 252px; height: 160px; margin-right: 10px; margin-bottom: 10px; display: none;">
<div class="kc_tips">
<div class="tips_hd" style="margin-bottom:-10px"><h4>快传推荐</h4><a class="mini_btn" href="javascript:;" title="最小化"><span class="mini"></span></a></div>
<div class="adv_area" style="width:248px;height:133px"><a href="#" target="_blank" class="chkembed"><img decoding="async" loading="lazy" src="http://img.kuai.xunlei.com/img/v2/fen/f86ac821c3efc81564298eef612de1de.png" width="248" height="133"></a></div> </div>
</div>
</code>
css样式
<code>.bot_tips {
position: fixed;
bottom: 0;
right: 0;
_position: absolute;
_top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
z-index: 999999;
}
.kc_tips {
border: #524B48 solid 1px;
background: white;
overflow: hidden;
box-shadow: 0 0 3px #727272;
}
.tips_hd {
height: 25px;
overflow: hidden;
padding: 0 11px 0 7px;
}
.adv_area, .hot_list {
background: white;
border: #D4D4D4 solid 1px;
margin-top: 10px;
}
.kc_tips .mini_btn {
display: block;
float: right;
width: 10px;
height: 10px;
_height: 7px;
margin-top: 8px;
overflow: hidden;
}
.mini {
height: 2px;
background: #515151;
margin-top: 4px;
display: block;
}
</code>
position: fixed;
bottom: 0;
right: 0;
_position: absolute;
_top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
z-index: 999999;
}
.kc_tips {
border: #524B48 solid 1px;
background: white;
overflow: hidden;
box-shadow: 0 0 3px #727272;
}
.tips_hd {
height: 25px;
overflow: hidden;
padding: 0 11px 0 7px;
}
.adv_area, .hot_list {
background: white;
border: #D4D4D4 solid 1px;
margin-top: 10px;
}
.kc_tips .mini_btn {
display: block;
float: right;
width: 10px;
height: 10px;
_height: 7px;
margin-top: 8px;
overflow: hidden;
}
.mini {
height: 2px;
background: #515151;
margin-top: 4px;
display: block;
}
</code>
这里是jQuery代码~
<code>$(".bot_tips_t").slideDown(),
$(".bot_tips_t .mini_btn").unbind("click").bind("click",
function() {
$(".bot_tips_t").hide(1e3),
setTimeout(function() {
$(".mini_tips").show()
},
1e3)
}),
$(".mini_tips").unbind("click").bind("click",
function() {
$(this).hide(),
$(".bot_tips_t").slideDown()
});</code>
$(".bot_tips_t .mini_btn").unbind("click").bind("click",
function() {
$(".bot_tips_t").hide(1e3),
setTimeout(function() {
$(".mini_tips").show()
},
1e3)
}),
$(".mini_tips").unbind("click").bind("click",
function() {
$(this).hide(),
$(".bot_tips_t").slideDown()
});</code>