Rumah > hujung hadapan web > tutorial js > js实现简单的星级选择器提交效果适用于评论等_javascript技巧

js实现简单的星级选择器提交效果适用于评论等_javascript技巧

WBOY
Lepaskan: 2016-05-16 17:19:38
asal
959 orang telah melayarinya

星级选择器,提交代码适用于评论等

没有用到js库,就是单独的js代码
js实现简单的星级选择器提交效果适用于评论等_javascript技巧 

复制代码 代码如下:



服务






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5


价格






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5


质量






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5






复制代码 代码如下:



复制代码 代码如下:

body{font-size:12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:14px;}
.star_rating a.two_stars{left:14px;}
.star_rating a.two_stars:hover{width:28px;}
.star_rating a.three_stars{left:28px;}
.star_rating a.three_stars:hover{width:42px;}
.star_rating a.four_stars{left:42px;}
.star_rating a.four_stars:hover{width:56px;}
.star_rating a.five_stars{left:56px;}
.star_rating a.five_stars:hover{width:70px;}
.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}
Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan