网页前端实现五星好评效果

整体代码可分为三部分：css样式、HTML主体、js函数

1.css样式

#score1 i {vertical-align: middle;display: inline-block;width: 32px;height: 32px;background: url('*img/star1.jpg*') no-repeat center center;background-size: cover;}#score1 i.on {background-image: url('*img/star2.jpg*');}

（注意图片路径是单引号）

2.HTML主体

<div align="center"><span id="score1"><i></i><i></i><i></i><i></i><i></i></span>
</div>

3.js函数**

function score(scoreId, extentStr) {scoreId = "#" + scoreId;$(scoreId + " i").hover(function() { // 鼠标移入，未确定选择分数时for (var i = 0; i <= $(this).index(); i++) {$(scoreId + " i").eq(i).addClass(extentStr); // 实星星}$(scoreId + " i").click(function() { // 点击评分，确定好分数后无法更改for (var i = 0; i <= $(this).index(); i++) {$(scoreId + " i").eq(i).addClass(extentStr);}$(scoreId).val($(this).index()+1);$(scoreId + " i").unbind(); // 清除移入移出});}, function() { // 鼠标移出$(scoreId + " i").removeClass(extentStr); // 描线星星});}score("score1", "on");

写进去发现hover函数并不能用，此时需要引入js的包。
可在此网站下载各种版本的jquery >http://www.jq22.com/jquery-info122

在头部引入HTTP连接后，需要手动Alt+enter下载。

4.运行结果

网页前端实现五星好评效果相关推荐

Android好评功能,Android自定义View实现五星好评效果
本文实例为大家分享了Android实现五星好评效果的具体代码,供大家参考,具体内容如下这个效果想必大家都非常熟悉,那么Android如何自定义实现这种效果呢? 首先自定义属性: 下面看看具体实现: ...
Vue_实现五星好评效果
一.前言我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果二.主要内容 1.将五星写在一个复用组件里面(因为在很多地方都会用到) <tem ...
vue制作五星好评效果
1.先在父组件创建star组件,自定义分数,传值过去子组件 2.子组件接收父组件传过来的score 3. 定义一下类名的常量通过计算属性computed 这里是css样式效果如下:
JS实现五星好评效果
效果图 css部分 li{list-style: none;display: inline-block;width: 27px;height: 27px;background: url(img/sta ...
前端实践小项目(一)五星好评与暂停取值
哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 "五星好评与暂停取值"(底部有源代码) 目录五星好评(JS版) 五星好评(JQuery版) 暂停取值五星好评(JS版) ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
微信小程序开发 - 五星好评
前言由于最近公司前端组开发紧缺人手,公司医美项目比较赶,所以主动请求协助医美小程序开发,现学现用,不过觉得小程序还蛮简单的,在做到一个评价医生页面时,用到点击五星好评,觉得有点用,就分享上来了~ 效 ...
如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...

网页前端实现五星好评效果

网页前端实现五星好评效果相关推荐

最新文章

热门文章