jquery实现仿商品星级评价

一,HTML部分

<div id="rating-star">

<a href="#">0</a>

<a href="#">1</a>

<a href="#">2</a>

<input type="hidden" id="goodLevel" />

</div>

二,CSS部分

接着给rating-star和链接一个样式,切换图片的关键只需要修改background-position就可以了:

#rating-star {

margin: 50px;

}

#rating-star a {

background: url(commentstar.png) no-repeat 0 -90px;

display: inline-block;

height: 23px;

text-indent: -999em;

width: 23px;

}

三,Js代码部分(关键的脚本)


$(‘#rating-star‘).on(‘click‘, ‘a‘, function () {

$(‘#goodLevel‘).val(this.innerHTML);

}).on(‘mouseenter‘, ‘a‘, function () {

setStar(this);

}).on(‘mouseleave‘, ‘a‘, function () {

var level = $(‘#goodLevel‘).val();

var $stars = $(‘#rating-star > a‘);

if (level == ‘‘) {

$stars.css(‘background-position‘, ‘0 -90px‘);

} else {

setStar($stars[level]);

}

});

function setStar(star) {

var $this = $(star);

var level = $this.html();

var n;

if (level == ‘2‘) {

n = ‘0 -30px‘;

} else if (level == ‘1‘) {

n = ‘0 0‘;

} else {

n = ‘0 -60px‘;

}

$this.prevAll().andSelf().css(‘background-position‘, n);

$this.nextAll().css(‘background-position‘, ‘0 -90px‘);

}

时间: 2024-10-16 05:33:45

jquery实现仿商品星级评价的相关文章

仿淘宝实现多行星级评价

最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他 <script type="text/javascript" > var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function

Jquery实现仿腾讯微薄的广播发表

前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学习学习Jquery,支持我吧,呵呵,这几天的学习Jquey使我感觉到其实Jquery的使用并不是很难,就我感觉Jquery只要把选择器学的差不多,其他的基本都可以迎刃而解,多了解一些方法,事件等等.所以我在这里实现了一个Jquery实现仿腾讯微薄的广播发表. 1. 首先新建HTML页面和介绍我要实现

iOS:自己写的一个星级评价的小Demo

重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a simple tool of star evaluation 一个简单的星级评价的工具 欢迎各位提出批评意见,也同时欢迎各位提供更多想法

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="

一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div

Unity调用IOS的StoreKit实现在游戏内部的对游戏进行星级评价和评论

废话不多说直接上代码. 一 Xcode端的OC代码 在Xcode里面新建一个空的工程(不会搞的百度一下),然后创建一个.h和.m文件,记住要把.m的后缀改成.mm(.mm文件和.m文件的区别就是:.mm文件除了可以包含Objective-C和C代码以外,还可以包含C++代码),这个类要继承自NSObject .h代码如下: // // UnityStoreKit.h // UnityStoreKit // // Created by mac on 2017/12/14. // Copyright

jQuery制作仿京东商城-商品列表商品筛选功能

这次使用jquery来实现一个仿京东商城-商品列表商品筛选的功能 一.html代码 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class

jQuery实现商品五星评价

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ul{ 8 list-style:none; 9 } 10 11 li{ 12 float:left; 13 font-size: 30px; 14 color: #f40;

jQuery Raty - 不错的星级评分插件

在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求. 一.展示 二.使用教程 ①.下载插件 https://github.com/wbotelhos/raty ②.导入文件 <script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script> <link type="text/cs