jquery实现三种星级评分效果代码
代码语言:html
所属分类:星级评分
代码描述:jquery实现三种星级评分效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; } body { font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; background-color: #F0F0F0; } /* starbox */.starbox { width: 480px; height: 30px; padding: 20px; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; } .fl { float: left; display: inline; } .s_name { float: left; display: block; width: 60px; text-align: right; } .star_ul { background: url(//repo.bfw.wiki/bfwrepo/image/60fc0d5c2d74e.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(//repo.bfw.wiki/bfwrepo/image/60fc0d5c2d74e.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(//repo.bfw.wiki/bfwrepo/image/60fc0d5c2d74e.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(//repo.bfw.wiki/bfwrepo/image/60fc0d5c2d74e.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 { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0