这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 仿淘宝评价评分功能——点击心形生成得分(有半心选择),具有很好的参考价值,下面跟着小编一起来看下吧
效果图:
图(1)初始图
图(2)点击效果
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>
- 文件上传
- </title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
- </script>
- <style>
- /*评分*/ ul{ height: 20px; } li{ list-style: none; float: left; width: 15px;
- height: 20px; } .leftHeart{ background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751uq6u6vfsnsvdbqbp.png')
- no-repeat bottom left; } .rightHeart{ background: url('http://cdn.attach.qdfuns.com/notes/pics/201702/28/145751crdjmidtdy4rmm1t.png')
- no-repeat bottom left; } .score{ font-size: 22px; font-weight: bolder;
- color: #ff0000; }
- </style>
- </head>
- <body onload="init()">
- <!-- 评分 -->
- <ul>
- <li class="halfHeart leftHeart">
- </li>
- <li class="halfHeart rightHeart">
- </li>
- <li class="halfHeart leftHeart">
- </li>
- <li class="halfHeart rightHeart">
- </li>
- <li class="halfHeart leftHeart">
- </li>
- <li class="halfHeart rightHeart">
- </li>
- <li class="halfHeart leftHeart">
- </li>
- <li class="halfHeart rightHeart">
- </li>
- <li class="halfHeart leftHeart">
- </li>
- <li class="halfHeart rightHeart">
- </li>
- 得分:
- <span class="score">
- </span>
- </ul>
- <script>
- $('.halfHeart:odd').CSS('padding-right', '5px');
- var ifHover = true,
- ifClick = true;
- $('.halfHeart').mouseover(function() {
- if (ifHover) {
- for (var i = 0; i <= $(this).index(); i++) {
- $('.halfHeart').eq(i).css('background-position', 'top left');
- }
- $('.score').text(($(this).index() + 1) * 0.5);
- }
- }) $('.halfHeart').mouseout(function() {
- if (ifHover) {
- for (var i = 0; i <= $(this).index(); i++) {
- $('.halfHeart').eq(i).css('background-position', 'bottom left');
- }
- }
- }) $('.halfHeart').click(function() {
- if (ifClick) {
- ifHover = false;
- ifClick = false;
- for (var i = 0; i <= $(this).index(); i++) {
- $('.halfHeart').eq(i).css('background-position', 'top left');
- }
- $('.score').text(($(this).index() + 1) * 0.5);
- }
- })
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0707/327203.html