jquery star 플러그인, 지원 페이지_jquery의 다양한 용도
- WBOY원래의
- 2016-05-16 17:54:541233검색
렌더링은 다음과 같습니다.
더 이상 고민할 필요 없이 우편번호:
html 코드
코드 복사 코드는 다음과 같습니다.
class="rated-wrap" > ;
< ;li> ;
< ;li> ;
별점수 시작
JS 코드
코드는 다음과 같습니다. 스크립트 유형= "text/javascript"> $(function(){ $(".rated-wrap a").mouseover(function(){ $(this).parent() .siblings( ).find("a").removeClass("active-star")
$(this).addClass("active-star") $("." $(this) .parent( ).parent().attr("id")).html($(this).attr("data-hint"))
}).mouseleave(function(){
var selectID =$( this).parent().parent().attr("id") "선택";
$(this).removeClass("active-star")
if($("# " selectID) .length==0)
{
$("." $(this).parent().parent().attr("id")).removeClass("active-hint") .html( "점수를 시작하려면 별표를 클릭하세요.")
}
else
{
$("." $(this).parent().parent().attr("id ")).html ($("#" selectID).attr("data-hint"));
$("#" selectID).addClass("active-star");
}
}).click (function(){
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id ") "선택" );
$(this).parent().siblings().find("a").attr("id","");
$("." $( this).parent( ).parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint")
})
})
css 코드
코드 복사
}).mouseleave(function(){
var selectID =$( this).parent().parent().attr("id") "선택";
$(this).removeClass("active-star")
if($("# " selectID) .length==0)
{
$("." $(this).parent().parent().attr("id")).removeClass("active-hint") .html( "점수를 시작하려면 별표를 클릭하세요.")
}
else
{
$("." $(this).parent().parent().attr("id ")).html ($("#" selectID).attr("data-hint"));
$("#" selectID).addClass("active-star");
}
}).click (function(){
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id ") "선택" );
$(this).parent().siblings().find("a").attr("id","");
$("." $( this).parent( ).parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint")
})
})
css 코드
코드 복사
코드는 다음과 같습니다.
<스타일>
.item-rank-rst, .user-rank-rst, .rated-wrap ul, .rated-wrap a:hover, .rated-wrap .active-star, .user-m-star, .urr- Rank60, .breadcrumb .note {
배경 이미지: url(xing_bg.png);/**-----스타 플러그인 배경 이미지----**/
배경 반복: 반복 없음;
}
.rated-wrap {
배경: 없음 반복 스크롤 0 0 #FFF9F1;
테두리: 1px 단색 #EFE0D7;
디스플레이: 인라인 블록;
플로트: 왼쪽;
높이: 20px;
오른쪽 여백: 5px;
패딩: 4px 0 0 5px;
위치: 친척;
상단: -2px;
너비: 89px;
z-색인: 0;
}
.rated-wrap ul {
배경 위치: 0 -250px;
높이: 16px;
위치: 친척;
너비: 85px;
z-색인: 10;
}
.rated-wrap li {
디스플레이: 인라인;
}
.rated-wrap a {
디스플레이: 블록;
높이: 16px;
왼쪽: 0;
위치: 절대;
상단: 0;
}
.rated-wrap .five-stars {
배경 위치: 0 -160px;
너비: 84px;
z-색인: 10;
}
.rated-wrap .four-stars {
배경 위치: 0 -178px;
너비: 68px;
z-색인: 20;
}
.rated-wrap .3-stars {
배경 위치: 0 -196px;
너비: 51px;
z-색인: 30;
}
.rated-wrap .two-stars {
배경 위치: 0 -214px;
너비: 34px;
z-색인: 40;
}
.rated-wrap .one-star {
배경 위치: 0 -232px;
너비: 17px;
z-색인: 50;
}
.rated-block .hint {
색상: #999999;
플로트: 왼쪽;
}
.active-hint {
색상: #CC0000;
}
.rated-block .err-hint {
색상: #EE0000;
글꼴 두께: 굵게;
}
注：css代码从项目中分解出，有一小分没贴完，大家可以根据自己的需求修改css style
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.