码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-05-01 20:25:24      阅读:389      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   javascript   width   color   2014   html   http   

效果图:

mamicode.com,码迷

 

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

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

 

html:

mamicode.com,码迷
                    <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>
mamicode.com,码迷

 

css:

mamicode.com,码迷
.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;
}
mamicode.com,码迷

 

js:

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

 

 

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

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

标签:style   blog   class   code   java   javascript   width   color   2014   html   http   

原文地址:http://www.cnblogs.com/easy5weikai/p/3702729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!