当前位置:  编程技术>jquery

jquery星级评分 jquery特效代码

    来源: 互联网  发布时间:2014-10-04

    本文导语:  一个jquery实现的星级评分的实例代码。 1,html代码   代码示例: jquery星级评论打分 1 2 3 4 5   2,css代码   代码示例: *{margin:0;padding:0;font-size:13px;} ul,li{list-style:none;} .star {position:relative;width:600px;height:24px; margin:20px...

一个jquery实现的星级评分的实例代码。
1,html代码
 

代码示例:

jquery星级评论打分

  • 1

  • 2

  • 3

  • 4

  • 5



 

2,css代码
 

代码示例:

*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('/tech-jquery/star.png') no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #ff6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}

3,js代码
 

代码示例:





$(function(){
var score = new score({
callback: function(cfg) {
console.log(cfg.staramount);
}
});
});

/**
 * jq评分效果
 */ 
 function score(options) { 
    this.config = { 
        selector                  :   '.star',     // 评分容器 
        rendercallback            :   null,        // 渲染页面后回调 
        callback                  :   null         // 点击评分回调                          
    }; 
 
    this.cache = { 
        amsg : [ 
                "很不满意|差得太离谱,与卖家描述的严重不符,非常不满", 
                "不满意|部分有破损,与卖家描述的不符,不满意", 
                "一般|质量一般,没有卖家描述的那么好", 
                "满意|质量不错,与卖家描述的基本一致,还是挺满意的", 
                "非常满意|质量非常好,与卖家描述的完全一致,非常满意" 
                ], 
        istar  : 0, 
        iscore : 0 
    }; 
 
    this.init(options); 
 }
 
 score.prototype = { 
 
    constructor: score, 
 
    init: function(options){ 
        this.config = $.extend(this.config,options || {}); 
        var self = this, 
            _config = self.config, 
            _cache = self.cache; 
 
        self._renderhtml(); 
    }, 
    _renderhtml: function(){ 
        var self = this, 
            _config = self.config; 
        var html = '' +  
                   ''; 
        $(_config.selector).each(function(index,item){ 
            $(item).append(html); 
            $(item).wrap($('
')); 
            var parentcls = $(item).closest('.parentcls'); 
            self._bindenv(parentcls); 
            _config.rendercallback && $.isfunction(_config.rendercallback) && _config.rendercallback(); 
        }); 
 
    }, 
    _bindenv: function(parentcls){ 
        var self = this, 
            _config = self.config, 
            _cache = self.cache; 
 
        $(_config.selector + ' li',parentcls).each(function(index,item){ 
             
            // 鼠标移上 
            $(item).mouseover(function(e){ 
                var offsetleft = $('ul',parentcls)[0].offsetleft; 
                ismax(index + 1); 
                 
                $('p',parentcls).hasclass('hidden') && $('p',parentcls).removeclass('hidden'); 
                $('p',parentcls).css({'left':index*$(this).width() + 12 + 'px'}); 
                 
 
                var html = '' +  
                              ''+index+'分 '+_cache.amsg[index].split('|')[0]+'' +  
                           '' + _cache.amsg[index].split('|')[1]; 
                $('p',parentcls).html(html); 
            }); 
 
            // 鼠标移出 
            $(item).mouseout(function(){ 
                ismax(); 
                !$('p',parentcls).hasclass('hidden') && $('p',parentcls).addclass('hidden'); 
            }); 
             
            // 鼠标点击 
            $(item).click(function(e){ 
                var index = $(_config.selector + ' li',parentcls).index($(this)); 
                _cache.istar = index + 1; 
                                 
                !$('p',parentcls).hasclass('hidden') && $('p',parentcls).addclass('hidden'); 
                var html = '' + 
                                index + 
                           '分' +_cache.amsg[index].split('|')[1]; 
 
                $('.desc',parentcls).html(html); 
                _config.callback && $.isfunction(_config.callback) && _config.callback({staramount:_cache.istar}); 
            }); 
             
        }); 
 
        function ismax(iarg) { 
            _cache.iscore = iarg || _cache.istar; 
            var lis = $(_config.selector + ' li',parentcls); 
             
            for(var i = 0; i < lis.length; i++) { 
                lis[i].classname = i < _cache.iscore ? "on" : ""; 
            } 
        } 
    } 
 };

    
 
 

您可能感兴趣的文章:

  • JQuery特效代码 右下角广告窗体(slideDown slideUp)
  • jquery特效 table鼠标滑过变色的实现代码
  • jquery倒计时广告特效代码 可关闭的js倒计时
  • Jquery特效 评分代码(星级评分)
  • jQuery简易图片放大特效示例代码
  • jquery实现鼠标移动时出现特效的代码
  • jquery 左右轮播图特效代码示例
  • jQuery特效字体插件 Font effect
  • jQuery特效插件 jSlickmenu
  • jQuery 文字特效 Arctext
  • JQuery特效-跟着鼠标走的Div
  • JQuery特效动画淡入淡出 两个ul标签中li互相移动
  • jquery宽屏特效之可关闭两边飘浮对联广告
  • jquery动画特效,jquery动画实例教程
  • Jquery实现的角色左右选择特效
  • jquery常用特效方法使用示例
  • 利用jquery动画特效和css打造的侧边弹出垂直导航
  • jQuery实现的Div窗口震动特效
  • JQuery插件iScroll实现下拉刷新,滚动翻页特效
  • 15款优秀的jQuery文本特效插件
  • 利用jquery写的左右轮播图特效
  • jquery淡化版banner异步图片文字效果切换图片特效
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3