jquery鼠标滑过星星区域显示评论信息、评论星星打分jquery特效|jsfoot网页特效 演示

@charset "utf-8";

/* reset */

*{margin:0;padding:0;list-style-type:none;}

a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/

:focus{outline:0;}

label{cursor:pointer;}

img{vertical-align:middle;}

table{empty-cells:show;border-collapse:collapse;border-spacing:0;}

h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}

abbr,acronym{border:0;font-variant:normal}

address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}

input,button,textarea,select{*font-size:100%}

a,img{border:0;}

a,a:visited{color:#5e5e5e; text-decoration:none;}

a:hover{color:#4183C4;text-decoration:underline;}

.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-table;}/* Hides from IE-mac \*/

*html .clearfix{height:1%;}

.clearfix{display:block;}/* End hide from IE-mac */

*+html .clearfix{min-height:1%;}

body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}

/* shortcut */

.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}

*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}

*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}

.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}

.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}

.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}

.shortcut a:hover{background:#fff;}

.shortcut span.right{float:right;}

.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}

.headeline{height:40px;overflow:hidden;}

.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

//屏蔽右键菜单

document.oncontextmenu = function (event){

if(window.event){

event = window.event;

}try{

var the = event.srcElement;

if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){

return false;

}

return true;

}catch (e){

return false;

}

}

// star choose

jQuery.fn.rater= function(options) {

// 默认参数

var settings = {

enabled: true,

url: '',

method: 'post',

min: 1,

max: 5,

step: 1,

value: null,

after_click: null,

before_ajax: null,

after_ajax: null,

title_format: null,

info_format: null,

image: 'images/stars.jpg',

imageAll :'images/stars-all.gif',

defaultTips :true,

clickTips :true,

width: 24,

height: 24

};

// 自定义参数

if(options) {

jQuery.extend(settings, options);

}

//外容器

var container= jQuery(this);

// 主容器

var content= jQuery('

content.css('background-image' , 'url(' + settings.image + ')');

content.css('height' , settings.height);

content.css('width' , (settings.width*settings.step) * (settings.max-settings.min+settings.step)/settings.step);

//显示结果区域

var result= jQuery('

container.after(result);

//显示点击提示

var clickTips= jQuery('

');

if(!settings.clickTips){

clickTips.hide();

}

container.after(clickTips);

//默认手形提示

var tipsItem= jQuery('

');

tipsItem.css('width' , (settings.width*settings.step) * (settings.max-settings.min+settings.step)/settings.step);

tipsItem.css('z-index' , settings.max / settings.step + 2);

if(!settings.defaultTips){//隐藏默认的提示

tipsItem.hide();

}

content.append(tipsItem);

// 当前选中的

var item= jQuery('

');

item.css('background-image' , 'url(' + settings.image + ')');

item.css('height' , settings.height);

item.css('width' , 0);

item.css('z-index' , settings.max / settings.step + 1);

if (settings.value) {

item.css('width' , ((settings.value-settings.min)/settings.step+1)*settings.step*settings.width);

};

content.append(item);

// 星星

for (var value=settings.min ; value<=settings.max ; value+=settings.step) {

item= jQuery('

');

if (typeof settings.info_format == 'function') {

//item.attr('title' , settings.title_format(value));

item.find(".popinfo").html(settings.info_format(value));

item.find(".popinfo").css("left",(value-1)*settings.width)

}

else {

item.attr('title' , value);

}

item.css('height' , settings.height);

item.css('width' , (value-settings.min+settings.step)*settings.width);

item.css('z-index' , (settings.max - value) / settings.step + 1);

item.css('background-image' , 'url(' + settings.image + ')');

if (!settings.enabled) {// 若是不能更改，则隐藏

item.hide();

}

content.append(item);

}

content.mouseover(function(){

if (settings.enabled) {

jQuery(this).find('.rater-star-item-current').hide();

}

}).mouseout(function(){

jQuery(this).find('.rater-star-item-current').show();

})

// 添加鼠标悬停/点击事件

var shappyWidth=(settings.max-2)*settings.width;

var happyWidth=(settings.max-1)*settings.width;

var fullWidth=settings.max*settings.width;

content.find('.rater-star-item').mouseover(function() {

jQuery(this).prevAll('.rater-star-item-tips').hide();

jQuery(this).attr('class' , 'rater-star-item-hover');

jQuery(this).find(".popinfo").show();

//当3分时用笑脸表示

if(parseInt(jQuery(this).css("width"))==shappyWidth){

jQuery(this).addClass('rater-star-happy');

}

//当4分时用笑脸表示

if(parseInt(jQuery(this).css("width"))==happyWidth){

jQuery(this).addClass('rater-star-happy');

}

//当5分时用笑脸表示

if(parseInt(jQuery(this).css("width"))==fullWidth){

jQuery(this).removeClass('rater-star-item-hover');

jQuery(this).css('background-image' , 'url(' + settings.imageAll + ')');

jQuery(this).css({cursor:'pointer',position:'absolute',left:'0',top:'0'});

}

}).mouseout(function() {

var outObj=jQuery(this);

outObj.css('background-image' , 'url(' + settings.image + ')');

outObj.attr('class' , 'rater-star-item');

outObj.find(".popinfo").hide();

outObj.removeClass('rater-star-happy');

jQuery(this).prevAll('.rater-star-item-tips').show();

//var startTip=function () {

//outObj.prevAll('.rater-star-item-tips').show();

//};

//startTip();

}).click(function() {

//jQuery(this).prevAll('.rater-star-item-tips').css('display','none');

jQuery(this).parents(".rater-star").find(".rater-star-item-tips").remove();

jQuery(this).parents(".goods-comm-stars").find(".rater-click-tips").remove();

jQuery(this).prevAll('.rater-star-item-current').css('width' , jQuery(this).width());

if(parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==happyWidth||parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==shappyWidth){

jQuery(this).prevAll('.rater-star-item-current').addClass('rater-star-happy');

}

else{

jQuery(this).prevAll('.rater-star-item-current').removeClass('rater-star-happy');

}

if(parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==fullWidth){

jQuery(this).prevAll('.rater-star-item-current').addClass('rater-star-full');

}

else{

jQuery(this).prevAll('.rater-star-item-current').removeClass('rater-star-full');

}

var star_count= (settings.max - settings.min) + settings.step;

var current_number= jQuery(this).prevAll('.rater-star-item').size()+1;

var current_value= settings.min + (current_number - 1) * settings.step;

//显示当前分值

if (typeof settings.title_format == 'function') {

jQuery(this).parents().nextAll('.rater-star-result').html(current_value+'分 '+settings.title_format(current_value));

}

$("#StarNum").val(current_value);

//jQuery(this).parents().next('.rater-star-result').html(current_value);

//jQuery(this).unbind('mouseout',startTip)

})

jQuery(this).html(content);

}

// 星星打分

$(function(){

var options= {

max: 5,

title_format: function(value) {

var title = '';

switch (value) {

case 1 :

title= '很不满意';

break;

case 2 :

title= '不满意';

break;

case 3 :

title= '一般';

break;

case 4 :

title= '满意';

break;

case 5 :

title= '非常满意';

break;

default :

title = value;

break;

}

return title;

},

info_format: function(value) {

var info = '';

switch (value) {

case 1 :

info= '

';

break;

case 2 :

info= '

';

break;

case 3 :

info= '

';

break;

case 4 :

info= '

';

break;

case 5 :

info= '

';

break;

default :

info = value;

break;

}

return info;

}

}

$('#rate-comm-1').rater(options);

});

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif;}

/*quiz style*/

.quiz{border:solid 1px #ccc;height:270px;width:772px;}

.quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}

.quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}

.quiz_content .btm{border:none;width:100px;height:33px;background:url(images/btn.gif) no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}

.quiz_content li.full-comment{position:relative;z-index:99;height:41px;}

.quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}

.quiz_content li.cate_l dl dt{float:left;}

.quiz_content li.cate_l dl dd{float:left;padding-right:15px;}

.quiz_content li.cate_l dl dd label{cursor:pointer;}

.quiz_content .l_text{height:120px;position:relative;padding-left:18px;}

.quiz_content .l_text .m_flo{float:left;width:47px;}

.quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}

.quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}

/*goods-comm-stars style*/

.goods-comm{height:41px;position:relative;z-index:7;}

.goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}

.goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}

.goods-comm-stars .star_choose{float:left;display:inline-block;}

/* rater star */

.rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}

.rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}

.rater-star-item{background-position: -100% -100%;}

.rater-star-item-hover{background-position:0 -48px;cursor:pointer;}

.rater-star-item-current{background-position:0 -48px;cursor:pointer;}

.rater-star-item-current.rater-star-happy{background-position:0 -25px;}

.rater-star-item-hover.rater-star-happy{background-position:0 -25px;}

.rater-star-item-current.rater-star-full{background-position:0 -72px;}

/* popinfo */

.popinfo{display:none;position:absolute;top:30px;background:url(images/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}

.popinfo .info-box{border:1px solid #f00; border-top:0 none;padding:0 5px;color:#F60;background:#FFF;}

.popinfo .info-box div{color:#333;}

.rater-click-tips{font:12px/25px;color:#333;margin-left:10px;background:url(images/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}

.rater-click-tips span{display:block;background:#FFF9DD url(images/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}

.rater-star-item-tips{background:url(images/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}

.cur.rater-star-item-tips{display:block;}

.rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}

一键复制

编辑

Web IDE

原始数据

按行查看

历史