js仿淘宝评价评分功能

2024-10-31 05:48:20

效果图：

图（1）初始图

图（2）点击效果

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>文件上传</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
 /*评分*/
 ul{
 height: 20px;
 }
 li{
 list-style: none;
 float: left;
 width: 15px;
 height: 20px;
 }
 .leftHeart{
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751uq6u6vfsnsvdbqbp.png') no-repeat bottom left;
 }
 .rightHeart{
 background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751crdjmidtdy4rmm1t.png') no-repeat bottom left;
 }
 .score{
 font-size: 22px;
 font-weight: bolder;
 color: #ff0000;
 }
</style>
</head>
<body onload="init()">
 <!-- 评分 -->
 <ul>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 <li class="halfHeart leftHeart"></li><li class="halfHeart rightHeart"></li>
 得分：<span class="score"></span>
 </ul>
 <script>
 $('.halfHeart:odd').css('padding-right', '5px');
 var ifHover = true,
  ifClick = true;
 $('.halfHeart').mouseover(function(){
  if (ifHover) {
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'top left');
  }
  $('.score').text(($(this).index()+1) * 0.5);
  }
 })
 $('.halfHeart').mouseout(function(){
  if (ifHover) {
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'bottom left');
  }
  }
 })
 $('.halfHeart').click(function(){
  if (ifClick) {
  ifHover = false;
  ifClick = false;
  for (var i = 0; i <= $(this).index(); i++) {
   $('.halfHeart').eq(i).css('background-position', 'top left');
  }
  $('.score').text(($(this).index()+1) * 0.5);
  }
 })
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

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实现五星评价功能

效果图: 代码如下: <!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
Javascript模仿淘宝信用评价实例(附源码)

本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
如何实现星星评价（jquery.raty.js插件）

1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径
jQuery满意度星级评价插件特效代码分享

这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计. 为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> <
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仿淘宝评价评分功能

效果图: 图(1)初始图图(2)点击效果代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>文件上传</title> <meta name="
JS仿淘宝实现的简单滑动门效果代码

本文实例讲述了JS仿淘宝实现的简单滑动门效果代码.分享给大家供大家参考.具体如下: 这是一个简单的仿淘宝滑动门效果代码,个人感觉真的挺不错,以前有过一款和这个差不多.在滑动门里你可以再次布局你的网页,可以做成一个功能超强大的导航,原示例是一个拼音索引程序,改成菜单也是可以的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/ 具体代码如下: <!DOCTYPE html PUBL
JS仿淘宝搜索框用户输入事件的实现

淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin
jquery实现类似淘宝星星评分功能实例

本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>
vue仿淘宝滑动验证码功能(样式模仿)

我们知道验证码的目的是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件可以直接使用 1.实际效果 2.PC端!!! vue组
jQuery UI仿淘宝搜索下拉列表功能

jquery仿淘宝搜索下拉列表实现效果如下: 网上搜索教程: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href=
js仿淘宝放大镜效果

仿淘宝放大镜封装效果,供大家参考,具体内容如下放大镜是做好了,但是没有下面小型导航无法选择放大图片,后期我会在封装出来的.由于考试当前考完试我会在推出vue的放大效果.以下是代码: 1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href
原生js仿淘宝网商品放大镜效果

效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:
js仿淘宝和百度文库的评分功能

本文实例为大家分享了类似于淘宝和百度文库的评分功能,js实现,供大家参考,具体内容如下效果如图: 五个五角星分别放在了一个table的五列中.下面是一个<p>,用来显示评分结果的:代码如下: <body onload="changebg()"> <table border="0" align="center" cellpadding="0" cellspacing="0" i
js仿淘宝的拼音检索特效代码

以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text- align:center;} #warpper{ position:absolute; left:100px; top:100px;} h5{ float:left;} a{ text-decoration:underline; curso

js仿淘宝评价评分功能

相关推荐

随机推荐