JS与JQuery分别实现淘宝（五星好评特效）

我们经常用的五星好评是如何来的，主要就是三个Event 中的三个事件分别：

onmouseover 指向事件

onmouseout 离开事件

onclick 点击事件

代码展示：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script>var clickIndex = -1;onload = function () {//获取所有的img标签var imgs = document.getElementsByTagName('img');//遍历所有图片对象,为每个图片注册指向事件for (var index in imgs) {imgs[index].onmouseover = function () {//将当前的及之前的图片变黄，之后的变为灰色var id = this.id;//获取当前元素的idfor (var i = 0; i < imgs.length; i++) {//当前元素之前的元素if (i <= id) {//star2为黄色图片imgs[i].src = 'images/star2.png';}else {//当前元素之后的图片，颜色为灰色imgs[i].src = 'images/star1.png';}}};//为每个图片对象注册移开事件imgs[index].onmouseout = function () {//被点击项之前的元素为黄色for (var i = 0; i <= clickIndex; i++) {imgs[i].src = 'images/star2.png';}for (var i = clickIndex + 1; i < imgs.length; i++) {//被点击项之后的元素为灰色imgs[i].src = 'images/star1.png';}};//为每个图片注册点击事件imgs[index].onclick = function () {//记录下来被点的图片编号，编号与索引对应clickIndex = parseInt(this.id);};}}; </script>
</head>
<body><img id="0" src="data:images/star1.png" /><img id="1" src="data:images/star1.png" /><img id="2" src="data:images/star1.png" /><img id="3" src="data:images/star1.png" /><img id="4" src="data:images/star1.png" />
</body>
</html>

JQuery实现方式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="../js/jquery-3.3.1.min.js"></script><style>div{width:200px;height:200px;background-color :pink;     }</style><script>$(function () {var wjxs = "★";var wjxk = "☆";//鼠标进入事件$(".comment>li").on("mouseenter", function () {$(this).text(wjxs).prevAll().text(wjxs);$(this).nextAll().text(wjxk);});//离开事件，所有的li变成空心$(".comment").on("mouseleave", function () {$(this).children().text(wjxk);// 找到current，让current以及current前面的变成实心$("li.current").text(wjxs).prevAll().text(wjxs);});//给li注册点击事件，获取当前元素的位置current$(".comment>li").on("click", function () {$(this).addClass("current").siblings().removeClass("current");});});</script>
</head>
<body><div><ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul></div></body>
</html>

效果展示：

收货：如果你是一个小白，请不要先考虑代码好不好的问题，先将功能实现，理解思路，你已经很厉害了。

JS与JQuery分别实现淘宝（五星好评特效）相关推荐

【jQuery】仿淘宝五星评价打分的实现
我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果. 首先,我们还是先分析我们想要的效果. 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语 ...
淘宝五星好评案例和实现学生档案管理案例
代码免费资源链接:https://download.csdn.net/download/weixin_50001396/14930528 讲解下载需要使用的字体样式完成静态页面将两种星星重叠 ...
【jquery】优化仿淘宝五星评价打分(附注释)
在前面的博文http://blog.csdn.net/lzgs_4/article/details/47913629,我们已经把仿淘宝五星评价打分功能实现出来了,实现五星打分的思路基本就是前面博文提到 ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
AUTO.JS脚本实现小米、淘宝、京东抢购
AUTO.JS脚本实现小米.淘宝.京东抢购,以及常用函数详解功能可以循环点击指定按钮,等其他按钮出现时停止点击,实现抢购加购物车功能思路每个商城的抢购步骤不一样,这里使用小米商城抢购为例, ...
javascript实现的淘宝五星评价（版本2）
今天又用了一下淘宝评价,发现淘宝评价不是鼠标移上去变化,而是直接用手点击.所以把前两天的代码又修改了一下,改成点击选中. 第一种实现方式 <!DOCTYPE html> <html& ...
淘宝默认好评加分吗？分几种情况？
淘宝商家要想快速提升店铺的等级,就是要有足够多的销量,而且买家在确认收货后,需要给予商品好评.这样才能加分.那淘宝默认好评加分吗? 淘宝上如果是系统默认好评的话也是会加分的.默认好评一般是一方评价后, ...
兼职淘宝刷好评的工作靠谱吗，商家补单时应该注意些什么？
自从淘宝新规则实行之后,对虚假交易这块是查得越来越严格了,无论是规则推出前还是后都会有商家依旧进行补单操作,但是这其中也不妨有不懂的市场行情,那么作为兼职的淘宝刷好评的工作可信度是多少呢? 兼职工作淘 ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...

JS与JQuery分别实现淘宝（五星好评特效）

JS与JQuery分别实现淘宝（五星好评特效）相关推荐

最新文章

热门文章