masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > javascript+css好多网站用的选星星实现打分功能的函数_表单特效

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

WBOY

Lepaskan： 2016-05-16 19:04:46

asal

963 orang telah melayarinya

函数有两个参数，功能如下：
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需刷新才能执行]

Label berkaitan：

css javascript 函数

sumber：php.cn

Artikel sebelumnya：js取得当前网址_javascript技巧 Artikel seterusnya：地震发生中逃生十大法则_时间日期

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}

daripada 2024-04-06 19:25:49

0

1

505

Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...

daripada 2024-04-06 18:16:26

0

1

403

Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

daripada 2024-04-06 15:35:24

0

1

274

Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...

daripada 2024-04-06 14:54:03

0

2

421

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan