移动端----------------评价之星级好评

最近无聊做了一个小评价，就是星级好评，就是我这里是通过改变img中src的属性，就可以实现星级评价的功能，话不多说，下来是代码：

HTML代码

<div class="xing" style="text-align: center;margin-bottom: 0.5rem;border-bottom: 1px dotted #eee"><img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('1')"><img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('2')"><img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('3')"><img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('4')"><img src="./img/xing1.png" alt="" style="width:0.54rem;height:0.54rem" onmousedown="change('5')">
</div>

js代码

function change(t) {$(".xing img").attr("src", "./img/xing1.png");for (var s = 0; s < t; s++) {$('.xing img').eq(s).attr("src", "./img/xing.png");}
}

js执行的时候，要首先引入jquery，才能正常使用

效果图如下

-
切图时，要注意切两个，一个是带有颜色的，一个是不带颜色的，两个图片是替换的，

你也可以根据自己的实际情况更改你所需要的图片

移动端----------------评价之星级好评相关推荐

一个漂亮的移动端评价页面
源代码下载:一个漂亮的移动端评价页面效果图: 这个水印影响效果了. 源代码下载:一个漂亮的移动端评价页面文件结构图: HTML代码: <!DOCTYPE html> <html& ...
华清远见嵌入式高端课程再获好评名企爱上星创客学员
9月,莘莘学子陆续返校开始新学期的学业,而在华清远见星创客嵌入式精英训练营,16041期班的学员们也即将结束5个月紧张的学习生活,准备迎接人生又一段新的旅程. 这段时间里,他们一边忙着最后一部分技术课 ...
使用cookie实现京东商品评价的五星好评组件的评分数据存储
整个项目的文件结构: img文件夹中使用的图片 commstar.png: face-red.png: JS代码 export default class Star {elem;label;name; ...
js实现仿淘宝商品评价的星级评定效果
HTML: <div class="shop-rating"><span class=&q ...
模仿淘宝评价的星级显示
HTML代码部分: <!DOCTYPE html> <html> <head><title>stars_show</title><me ...
星级评价组件--引发对React组件的思考
机缘巧合之下,我在接到我司产品星级评价需求的前一天,看到了蜗牛老湿的<★tiny-rate 东半球最小的评级组件☆>,在大佬的启发下我就十分顺手的撸了一个移动端用的星级评价组件. 本篇会涉 ...
移动端星级评分效果的实现
星级评分在网页当中是经常用到的,今天特地用原生的JS实现了在移动端中的星级评分效果.由于在移动端中是没有鼠标事件的,所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同,就是要把相应的事件转成 ...
天猫新规：宣布重罚“好评返现” 却鼓励“评价有礼” 两者区别在哪里？
天猫新规:宣布重罚好评返现根据新规,发布天猫明令禁止的不当营销类信息的:在商品页面发布的,每件商品扣一分(但三天内累计扣分不超过七分),同时第一次.第二次下架商品,第三次删除商品;若在店铺装修区等其 ...
小米手机android评价,安卓手机4月好评榜出炉：华为小米无缘前三，你的手机上榜了吗？...
就在今天,安兔兔发布了安卓手机4月好评榜,从榜单内容来看,上榜数量最多的要数魅族手机,共有4款机型上榜,分别为:魅族17Pro.魅族18.魅族17.魅族18Pro. 按照排名,此次上榜的十款机型包含一 ...

移动端----------------评价之星级好评

HTML代码

js代码

效果图如下

移动端----------------评价之星级好评相关推荐

最新文章

热门文章