【锋利的JQuery-学习笔记】添加提示图片

时间：2014-05-01 20:25:24 收藏：0 阅读：389

效果图：

mamicode.com,码迷

hot图片： mamicode.com,码迷（注意：这个图标本身就有抖动效果的，并不是由于标签<del>而具有抖动效果）

周期性抖动，起到提示的作用

html：

                    <div class="jnCatainfo">
                        <h3>推荐品牌</h3>
                        <ul>
                            <li><a href="#nogo" >耐克</a></li>
                            <li><a href="#nogo" class="promoted">阿迪达斯</a></li>
                            <li><a href="#nogo" >达芙妮</a></li>
                            <li><a href="#nogo" >李宁</a>
                            <li><a href="#nogo" >安踏</a></li>
                            <li><a href="#nogo" >奥康</a></li>
                            <li><a href="#nogo" class="promoted">骆驼</a></li>
                            <li><a href="#nogo" >特步</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: 0;
    width: 21px;
}

js：

/* 添加hot显示 */
$(function(){
    //$(".jnCatainfo .promoted").append(‘<s class="hot"></s>‘);
    $(".jnCatainfo .promoted").append(‘<del class="hot"></del>‘);
})

【锋利的JQuery-学习笔记】添加提示图片,码迷,mamicode.com