communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > javascript+css好多网站用的选星星实现打分功能的函数_表单特效

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

WBOY

Libérer： 2016-05-16 19:04:46

original

964 Les gens l'ont consulté

函数有两个参数，功能如下：
obj： img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上，我们会在这个地方用个ajax方法，把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。
需要的两张图片：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>脚本之家_www.jb51.net_阿当制作选星星打分</title> 
<style type="text/css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style> 
<script type="text/javascript"> 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'http://www.jb51.net/upload/20080508122008586.gif'; 
var imgSrc_2 = 'http://www.jb51.net/upload/20080508122010810.gif'; 
//--------------------------------------------------------------------------- 
if(obj.rateFlag) return; 
var e = oEvent || window.event; 
var target = e.target || e.srcElement;  
var imgArray = obj.getElementsByTagName("img"); 
for(var i=0;i<imgArray.length;i++){ 
   imgArray[i]._num = i; 
   imgArray[i].onclick=function(){ 
    if(obj.rateFlag) return; 
    obj.rateFlag=true; 
    alert(this._num+1); 
   }; 
} 
if(target.tagName=="IMG"){ 
   for(var j=0;j<imgArray.length;j++){ 
    if(j<=target._num){ 
     imgArray[j].src=imgSrc_2; 
    } else { 
     imgArray[j].src=imgSrc; 
    } 
   } 
} else { 
   for(var k=0;k<imgArray.length;k++){ 
    imgArray[k].src=imgSrc; 
   } 
} 
} 
</script> 
 
<p class="starWrapper" onmouseover="rate(this,event)"> 
          <img  src="http://www.jb51.net/upload/20080508122008586.gif" title="很烂" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="一般" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="还好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="较好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="很好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" > 
</p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Étiquettes associées：

css javascript 函数

source：php.cn

Article précédent：js取得当前网址_javascript技巧 Article suivant：地震发生中逃生十大法则_时间日期

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...

Depuis 2024-04-06 19:25:49

0

1

505

Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...

Depuis 2024-04-06 18:16:26

0

1

403

Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...

Depuis 2024-04-06 15:35:24

0

1

274

Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...

Depuis 2024-04-06 14:54:03

0

2

421

Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...

Depuis 2024-04-06 12:53:11

0

1

376

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal