首页 > 代码库 > 【锋利的JQuery-学习笔记】添加提示图片

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

2024-07-02 09:37:32   223人阅读

效果图：

 

hot图片： （注意：这个图标本身就有抖动效果的，并不是由于标签<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>‘);
})

 

 


联系
我们