JS与JQuery分别实现淘宝五星好评特效
本文实例为大家分享了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;//获取当前元素的id
for (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="images/star1.png" />
<img id="1" src="images/star1.png" />
<img id="2" src="images/star1.png" />
<img id="3" src="images/star1.png" />
<img id="4" src="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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现商品评价五星好评
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下 一.效果展示 二.代码实现 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>好评</title> <link rel="stylesheet" type="text/css" href
-
javascript实现五星评分功能
本文为大家分享了javascript实现五星评分功能的实例代码,大家可以参考学习一下,具体的实现办法如下 在分享javascript实现五星评价功能的实例代码之前,先看一看效果图: star1.png star1.png 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>53</
-
JS实现五星好评案例
本文实例为大家分享了JS实现五星好评案例的具体代码,供大家参考,具体内容如下 业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护.并且在点击后我们抛出事件,记录下对应的name,分数等信息,保存在cookie中. 在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置. <!DOCTYPE html> <html lang=&qu
-
jQuery基于图层模仿五星星评价功能的方法
本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
JS实现五星好评效果
用JS实现面向对象方法实现京东的五星好评效果. 鼠标滑过时的显示: 当评价完成后,关闭浏览器重新打开页面,还是上次的评价结果.用cookie实现. 具体实现如下: import Componenet from "./Component.js"; export default class Stars extends Componenet { label; STARS_NUM = 5; starArr = []; score = 0; starsCon; faceIcon; scoreCo
-
jQuery实现的五星点评功能【案例】
本文实例讲述了jQuery实现的五星点评功能.分享给大家供大家参考,具体如下: 效果图: 需求分析: 1.鼠标移入li标签,当前li标签和之前的li标签全部变为实心; 2.鼠标移开,所有的li标签变为空心; 3.鼠标点击li标签,当前li标签和之前的li标签全部变为实心 jq代码实现过程: var shiXin="★"; var kongXin='☆' $('li').on('mouseenter',function ( ) { //需求1:鼠标移入后,当前的li标签和前面的li标签显
-
基于jquery实现五星好评
在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px;
-
javascript实现五星评价代码（源码下载）
废话不多说,先上个效果图: 查看演示 源码下载 javascript中的代码 var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spa
-
js实现五星评价功能
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五星评价</title> <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.com/t/f
-
JS与JQuery分别实现淘宝五星好评特效
本文实例为大家分享了JS与JQuery实现淘宝五星好评特效的具体代码,供大家参考,具体内容如下 我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><
-
jQuery实现类似淘宝网图片放大效果的方法
本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="
-
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
本文实例讲述了jQuery实现仿淘宝带有指示条的图片转动切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝带有指示条的图片转动切换结果</title> <style type="text/css"> * { padd
-
jquery+CSS3实现淘宝移动网页菜单效果
本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移.难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错.相信肯定有更好的解决方法. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css3-taobao-phone-menu-c
-
基于jQuery模拟实现淘宝购物车模块
这是网页版淘宝中购物车的页面 注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1.每次点击+号,根据文本框的值乘以当前商品的价格就是商品的小计 2.只能增加本商品的小计,就是当前商品的小计模块 3.修改普通元素的内容是text方法 4.当前商品的价格要把￥符号去掉再相乘 截取字符串substr() 5.parents(‘选择器’)可以返回指定祖先元素4 6.最后计算的结果如果想要保留两位小数通过toFixed(2)方法 7.用户也可以直接修改表单
-
jquery实现类似淘宝星星评分功能实例
本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>
-
Android中利用动态加载实现手机淘宝的节日特效
相信去年圣诞节打开过手机淘宝的童鞋都会对当时的特效记忆犹新吧:全屏飘雪,旁边还有个小雪人来控制八音盒背景音乐的播放,让人有种身临其境的感觉,甚至忍不住想狠狠购物了呢(误),大概就是下面这个样子滴: 嗯,确实很炫,那么我们一步步去分析是如何实现的: 一.实现下雪的 View 首先,最上面一层的全屏雪花极有可能是一个顶层的View,而这个View是通过动态加载去控制显示的(不更新淘宝也能看到这个效果).那么我们先得实现雪花效果的 View,人生苦短,拿来就用.打开 gank.io,搜索"雪花&quo
-
纯jquery实现模仿淘宝购物车结算
这篇文章里,将会提到购物车里的所有功能.包括全选.单选金额改变.在增加数量时金额也会相应改变. 效果图展示: 说下大致的思路吧: 1.首先是计算一行的价格.这个功能在上篇博客里有提到,这里就不列举出来了. 2.遍历选中的几行,将每行的数值相加. 3.将值赋给总金额显示出来.当取消勾选或加减数量时,金额会相应改变. 下面是具体的js部分: <script type="text/javascript"> $(function(){ //计算总金额 function totalM
-
jQuery UI仿淘宝搜索下拉列表功能
jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=
-
jQuery实现类似淘宝购物车全选状态示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu