相思资源网 Design By www.200059.com

本文实例讲述了jQuery基于ajax实现星星评论代码。分享给大家供大家参考。具体如下:

这里使用jquery模仿点评网的星星评论功能,Ajax评论模块,鼠标点击星星即可评价,下边是分数,可以点击后给分,网上很流行的效果,本代码相对完整,相信很多朋友会喜欢的。

先来看看运行效果截图:

jQuery基于ajax实现星星评论代码

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>jquery点评网星星评论</TITLE>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
b,em,i{ font-style:normal; font-weight:normal;}
h1,h2,h3,h4{ font-size:14px;}
h5{ font-size:12px;}
h6{ font-size:12px;font-style:normal;}
.fl{ float: left; display: inline;}
.box_163css{ width: 480px;margin:20px auto; height: 30px;}
.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}
.star_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;}
.star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }
.star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.star_ul li .active-star{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat;}
.star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}
.star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}
.star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}
.star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}
.star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}
.s_result{ padding: 6px 0 0 5px; }
.square_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;}
.square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }
.square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.square_ul li .active-square{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat;}
.square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}
.square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}
.square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}
.square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}
.square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}
.s_result_square{padding: 4px 0 0 9px; }
</style>
<SCRIPT src="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">

希望本文所述对大家的jquery程序设计有所帮助。

标签:
jQuery,ajax,星星评论

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery基于ajax实现星星评论代码”

暂无jQuery基于ajax实现星星评论代码的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。