jquery - 谁能帮助我如何将 jplayer 的 circleplayer 皮肤减半？

Question

使用circle player 的css 文件，我将其修改为circle player 的一半大小。我所做的是将 css 中的值更改为一半大小。请参见下面的代码示例:

.cp-container.small {
    position: relative;
    width: 52px !important;
    height: 52px !important;
    background: url("bgr.jpg") 0 0 no-repeat;
    padding: 24px;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.cp-container :focus {
    border:none; 
    outline:0;
}

.cp-buffer-1.small,
.cp-buffer-2.small,
.cp-progress-1.small,
.cp-progress-2.small {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px !important;
    height: 52px !important;
    clip: rect(0px,26px,52px,0px) !important;

    -moz-border-radius: 52px;
    -webkit-border-radius: 52px;
    border-radius: 52px;
}

.cp-buffer-1.small,
.cp-buffer-2.small {
    background: url("buffer.png") 0 0 no-repeat;
} 


/* FALLBACK for .progress
 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
 * (It needs the container selector to work. Or use div)
 */ 

.cp-container .cp-fallback.small {
    background: url("progress_sprite-green.jpg") no-repeat;
    background-position: 0 104px !important; 
}

/* .cp-progress-1,
.cp-progress-2 {
    background: url("progress.png") 0 0 no-repeat;
} */

.cp-progress-1.green.small,
.cp-progress-2.green.small{
    background: url("progress-green.png") 0 0 no-repeat;
}

.cp-progress-1.blue.small,
.cp-progress-2.blue.small{
    background: url("progress-blue.png") 0 0 no-repeat;
}

.cp-progress-1.red.small,
.cp-progress-2.red.small{
    background: url("progress-red.png") 0 0 no-repeat;
}

.cp-buffer-holder.small,
.cp-progress-holder.small,
.cp-circle-control.small {
    position:absolute;
    width: 52px !important;
    height: 52px !important;
} 

.cp-circle-control {
    cursor:pointer;
}

.cp-buffer-holder.small,
.cp-progress-holder.small {
    clip:rect(0px,52px,52px,26px) !important;
    display:none;
}


/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress.cp-fallback{
    clip:rect(auto, auto, auto, auto);
}  

.cp-controls.small {
    margin:0;
    padding: 13px !important;
}

.cp-controls li{
    list-style-type: none;
    display: block;

    /*IE Fix*/  
    position: absolute;
}

.cp-controls.small li a{
    position: relative;
    display: block;
    width:25px !important;
    height:25px !important;
    text-indent:-9999px;
    z-index:1;      
}

/* .cp-controls .cp-play {
    background: url("controls.jpg") 0 0 no-repeat;
} */

.cp-controls .cp-play.green.small {
    background: url("controls-green.jpg") 0 0 no-repeat;
}

.cp-controls .cp-play.red.small {
    background: url("controls-red.jpg") 0 0 no-repeat;
}

.cp-controls .cp-play.blue.small {
    background: url("controls-blue.jpg") 0 0 no-repeat;
}



.cp-controls .cp-play.green.small:hover{
    background: url("controls-green.jpg") -25px 0 no-repeat;
}

.cp-controls .cp-play.red.small:hover {
    background: url("controls-red.jpg") -25px 0 no-repeat;
}

.cp-controls .cp-play.blue.small:hover {
    background: url("controls-blue.jpg") -25px 0 no-repeat;
}

/* .cp-controls .cp-pause {
    background: url("controls.jpg") 0 -50px no-repeat;
} */

.cp-controls .cp-pause.green.small{
    background: url("controls-green.jpg") 0 -25px no-repeat;
}

.cp-controls .cp-pause.red.small{
    background: url("controls-red.jpg") 0 -25px no-repeat;
}

.cp-controls .cp-pause.blue.small {
    background: url("controls-blue.jpg") 0 -25px no-repeat;
}

/* .cp-controls .cp-pause:hover {
    background: url("controls.jpg") -50px -50px no-repeat;
} */

.cp-controls .cp-pause.green.small:hover {
    background: url("controls-green.jpg") -25px -25px no-repeat !important;
}

.cp-controls .cp-pause.red.small:hover {
    background: url("controls-red.jpg") -25px -25px no-repeat !important;
}

.cp-controls .cp-pause.blue.small:hover {
    background: url("controls-blue.jpg") -25px -25px no-repeat !important;
}

.cp-jplayer {
    width: 0;
    height: 0; 
}

我在 firefox 上测试它工作正常，但在 IE 上不行。嗯，我希望你能帮助解决这个问题。

Answer 1

您的头寸似乎也没有减半:

background-position: 0 104px !important;

上面应该减半。如果您愿意，我可以将我制作的半尺寸工作文件发送给您!