`
cindylu520
  • 浏览: 149116 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

星级点评效果

    博客分类:
  • JS
 
阅读更多
 var sArray = new Object;
		 sArray[0] = new Image;
		 sArray[0].src = "/images/o/dbx.jpg";
		 for (var i=1; i<6; i++) {
		 sArray[i] = new Image();
		 sArray[i].src = "/images/o/dhx.jpg";
         var starTimer;
		 var pro ;
		 var rate ;
		 function initStar() {
		 	try {
			   setProfix("star_");
			   setStars(document.getElementById("commentImg").value,'commentImg');
			   setProfix("taste_");
			   setStars(document.getElementById("taste").value,'taste');
			   setProfix("price_");
			   setStars(document.getElementById("price").value,'price');
			   setProfix("environment_");
			   setStars(document.getElementById("environment").value,'environment');
		 	} catch(e){
		  	}
		 }
		 function showStars(starNum,rate) {
			 try {
			  clearStarTimer();
			  greyStars();
			  colorStars(starNum);
			  } catch(e){}
			  //setStars(starNum,rate);
			 }
		 function setProfix(profix) {
		   pro = profix ;
		 }
		 function colorStars(starNum) {
		  try {
		   for (var i=1; i <= starNum; i++) {
		    var tmpStar = document.getElementById(pro + i);
		    tmpStar.src = sArray[starNum].src;
		   }
		  } catch(e){}
		 }
		 function greyStars() {
		  try {
		   for (var i=1; i<6; i++) {
		    var tmpStar = document.getElementById(pro + i);
		    tmpStar.src = sArray[0].src;
		   }
		  } catch(e){}
		 }
		 function greyAll(curpro,currate) {
		  try {
		   document.getElementById(currate).value ="";
		   for (var i=1; i<6; i++) {
		    var tmpStar = document.getElementById(curpro + i);
		    tmpStar.src = sArray[0].src;
		   }
		  } catch(e){}
		 }
		 function setStars(starNum,rate) {
		  rate = rate ;
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   commentImg.value = starNum;
		   showStars(starNum);
		   } catch(e){}
		 }
		 function clearStars(currate) {
		  rate = currate ;
		  try {
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function resetStars() {
		  try {
		   clearStarTimer();
		   var commentImg = document.getElementById(rate);
		   if (commentImg.value != '') {
		    setStars(commentImg.value,rate);
		   } else {
		    greyStars();
		   }
		  } catch(e){}
		 }
		 function clearStarTimer() {
			  if (starTimer) {
			   clearTimeout(starTimer);
			   starTimer = null;
			  }
		  }
		}

 

 

<input type="hidden" id="commentImg" name="commentImg" value="" >
 <a onmouseover="javascript:setProfix('star_');showStars(1,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(1,'commentImg');"><img src="/images/o/dbx.jpg" id="star_1" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(2,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(2,'commentImg');"><img src="/images/o/dbx.jpg" id="star_2" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(3,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(3,'commentImg');"><img src="/images/o/dbx.jpg" id="star_3" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(4,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(4,'commentImg');"><img src="/images/o/dbx.jpg" id="star_4" width="16" height="16" border="0" alt=""/></a><a onmouseover="javascript:setProfix('star_');showStars(5,'commentImg');" onmouseout="javascript:setProfix('star_');clearStars('commentImg');" href="javascript:setProfix('star_');setStars(5,'commentImg');"><img src="/images/o/dbx.jpg" id="star_5" width="16" height="16" border="0" alt=""/></a>

 

分享到:
评论

相关推荐

    jquery实现的一个星级评价

    接下来,为星级评价的视觉效果编写CSS。这里我们将设置星星图标,以及选中和悬停状态的样式。 ```css .rating { display: inline-block; } .rating label { cursor: pointer; font-size: 1.5em; color: #ddd; ...

    JavaScript实现星级评价效果

    在JavaScript实现星级评价效果时,我们通常会利用HTML、CSS和JS三者结合来创建一个交互式的评分系统。以下是对这个话题的详细说明: 首先,HTML部分用于布局和输入隐藏的评分信息。在这个例子中,有两个隐藏的`...

    CSS 星级评价效果代码

    class="four-stars"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="五星" class="five-stars"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; 这段代码展示了如何使用CSS来创建一个静态的星级评价效果。在CSS中,我们使用`list-style`属性将列表项的默认样式...

    微信小程序实现星级评价效果

    在微信小程序中实现星级评价效果是一项常见的功能,它允许用户对商品或服务进行直观的评分。以下是如何在微信小程序中创建这样一个星级评价系统的详细步骤: 首先,我们需要在`wxml`(微信小程序的结构文件)中定义...

    Vue实现星级评价效果实例详解

    总结来说,Vue实现星级评价效果的关键在于创建一个可复用的`Star`组件,通过计算属性动态生成星星的类名,结合CSS展示不同状态的星星图片。这个实例不仅易于理解,而且具备良好的扩展性,可以根据需求进行定制和优化...

    多个CSS3实现的动画效果不错的星级评分效果

    在本主题中,我们将深入探讨如何使用CSS3来创建动态且引人注目的星级评分效果。...这样,你就成功地使用纯CSS3创建了一个动态的星级评分系统,为用户提供了一种直观且有趣的互动方式来表达他们的评价。

    基于jQuery实现星级评分效果完美版

    在本文中,我们将深入探讨如何基于jQuery实现一个功能完善的星级评分效果,这通常用于网站上的用户评价或评分系统。雅虎口碑网的星级评分界面是一个经典的例子,它提供了直观、易于使用的用户体验。以下是对实现这一...

    jQuery满意度星级评价插件特效源码.zip

    本插件源码的标题和描述都表明了其主要功能,即基于jQuery库实现的星级评价效果。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的核心特性包括选择器、DOM...

    评论星级评分效果

    在IT行业中,星级评分系统是一种常见的用户反馈机制,广泛应用于电子商务、餐饮、电影评价等多个领域。这个系统允许用户通过直观的星形图标来表达他们对产品或服务的满意度,从而为其他用户提供参考,并帮助商家了解...

    jquery文章评论星级打分效果代码

    本文将深入探讨如何使用jQuery实现文章评论的星级打分效果,这是一个常见且实用的功能,常用于博客、论坛和电子商务网站,以增强用户体验。 首先,我们需要了解星级打分的基本原理。通常,它通过一组星形图标来表示...

    js星级评论打分效果

    js实现的星级评论打分效果,比较简单,但是还算比较实用吧。分享一下 &lt;span&gt;js星级评论打分 ;"&gt;1 ;"&gt;2 ;"&gt;3 ;"&gt;4 ;"&gt;5 &lt;/ul&gt;

    jQuery简单星级评价打分代码.zip

    《jQuery实现简单星级评价打分系统的详解》 在网页交互设计中,星级评价系统是一种常见的用户反馈机制,它使得用户可以直观地对产品或服务进行评价。本篇将深入探讨如何利用jQuery库来构建一个简单易用的星级评价...

    经典jQuery和PHP来实现星级评分效果

    很多网站都应用了星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery和PHP来实现星级评分效 果。 1.本例实现的效果:过渡动画显示评分操作。...

    利用css制作的星级评分效果.rar_many7y7_利用css制作的星级评分效果

    在网页设计中,星级评分效果是一种常见的用户界面元素,它能直观地展示用户对某个产品或服务的评价等级。这个“利用css制作的星级评分效果”教程将带你了解如何使用CSS(层叠样式表)来创建这样的交互式视觉组件。 ...

    jquery打分评星级效果

    "jquery打分评星级效果"是利用jQuery实现的一种常见交互功能,让用户能够对内容进行评分,通常表现为一颗颗星星,用户点击时可以选中相应数量的星星来表达他们的满意度或评价等级。这个功能在电商、评论系统、用户...

    js评分效果 星级评分 js星级评分效果

    JavaScript(简称JS)星级评分效果是一种常见的用户交互设计,它允许用户通过选择星星数量来对某个项目进行评价,常用于电商、评论系统等场景。在本文中,我们将深入探讨如何实现这种js星级评分效果,以及涉及到的...

    jquery实现星级评分效果

    在网页设计中,星级评分是一种常见的用户界面元素,它允许用户对内容或服务进行直观的评价,通常以一到五星的形式展示。jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画效果等功能,使得...

Global site tag (gtag.js) - Google Analytics