效果图:
hot图片: (注意:这个图标本身就有抖动效果的,并不是由于标签<del>而具有抖动效果)
周期性抖动,起到提示的作用
html:
<div class="jnCatainfo">
<h3>推荐品牌</h3>
<ul>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >耐克</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="promoted">阿迪达斯</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >达芙妮</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >李宁</a>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >安踏</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >奥康</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="promoted">骆驼</a></li>
<li><a href="#nogo" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >特步</a></li>
</ul>
css:
.jnCatainfo li a.promoted{
color:#F9044E;
}
.jnCatainfo li .hot {
background: url("../images/hot.gif") no-repeat scroll 0 0 transparent;
height: 16px;
position: absolute;
top:;
width: 21px;
}
js:
/* 添加hot显示 */
$(function(){
//$(".jnCatainfo .promoted").append('<s class="hot"></s>');
$(".jnCatainfo .promoted").append('<del class="hot"></del>');
})