jquery制作五星好评插件

效果展示：

直接上代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>评分</title><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><style>.scoreDiv{width: 60%;height: 50px;line-height: 50px;margin: 50px auto;padding: 5px 10px;}.scoreStar{width: 100%;}.scoreStar .star{display: inline-block;width: 25px;height: 25px;background: url(img/star1.png);background-size: 100% 100%;margin-right: 6px;cursor: pointer;}.scoreStar .star .choo{display: block;width: 100%;height: 100%;background: url(img/star2.png);background-size: 100% 100%;cursor: pointer;}</style></head><body><div class="scoreDiv"><div class="scoreStar"><i class="star"><a class="choo"></a></i><i class="star"></i><i class="star"></i><i class="star"></i><i class="star"></i></div></div><script>$("div.scoreStar .star").click(function(){ //星星点击事件var index = $(this).index();var html = '<a class="choo"></a>';$("div.scoreStar .star").empty();scoreNum = index + 1;$("div.scoreStar .star").each(function(i,value){if(i<=index){$(this).append(html);}})});</script></body>
</html>

图片素材：

jquery制作五星好评插件相关推荐

php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
php 识别图片五星好评,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
jQuery实现五星好评
简单实现五星评价 html代码: <div class="box"><ul><li><span class="star1&quo ...
jQuery 实现五星好评
直接上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
vue制作五星好评效果
1.先在父组件创建star组件,自定义分数,传值过去子组件 2.子组件接收父组件传过来的score 3. 定义一下类名的常量通过计算属性computed 这里是css样式效果如下:
JS与JQuery分别实现淘宝（五星好评特效）
我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件代码展示: <!D ...

jquery制作五星好评插件

jquery制作五星好评插件相关推荐

最新文章

热门文章