1111

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>五星评价(图片实现) </title>
  6.     <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
  7. </head>
  8. <body>
  9.     <div class="starMain" style="width: 100%;margin: 0 auto;height: 10px;line-height:10px;margin-top: 1px;">
  10.         <img class="ev-star" src="/Script/image/evaluate/empty.png" />
  11.         <img class="ev-star" src="/Script/image/evaluate/empty.png" />
  12.         <img class="ev-star" src="/Script/image/evaluate/empty.png" />
  13.         <img class="ev-star" src="/Script/image/evaluate/empty.png" />
  14.         <img class="ev-star" src="/Script/image/evaluate/empty.png" />
  15.     </div>
  16.     <br/> <br />
  17.     <input class="preData starResult" type="text" />
  18.  
  19.     <script>
  20.         $(function () {
  21.             $(".starMain").each(function () {
  22.                 starFun($(this));
  23.             })
  24.         });
  25.         function starFun(element) {
  26.             var imgs = element.find(".ev-star");
  27.             var len = imgs.length;
  28.             for (var i = 0; i < len; i++) {
  29.                 imgs[i].index = i;
  30.                 imgs[i].onclick = function () {
  31.                     var count = 0;
  32.                     for (var j = 0; j <= this.index; j++) {
  33.                         imgs[j].src = "/Script/image/evaluate/full.png";
  34.                         count++;
  35.                     }
  36.                     for (var h = (this.index + 1); h < len; h++) {
  37.                         imgs[h].src = "/Script/image/evaluate/empty.png";
  38.                     }
  39.                     var starResult = $(this).parent().parent().find(".starResult");
  40.                     starResult.val(count);
  41.                 }
  42.             }
  43.         }
  44.     </script>
  45. </body>
  46. </html>

五角星：

jquery 五星评价(图片实现)的更多相关文章

  1. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  2. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  3. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  4. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  5. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  7. jQuery.hhNewSilder 滚动图片插件

    /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  9. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

随机推荐

  1. VC++ 模拟&quot;CLICK事件&quot;关闭指定窗体

    今天改动一个工具时遇到一个有意思的问题,打开某个窗体时弹出一些不相关的窗体.须要用户自己去手动点击后才干继续.保证不了自己主动处理,如今解说决方案记录一下,例如以下 主要使用windows提供的Fin ...

  2. 使用qemu

    1 获取qemu启动linux kernel的log qemu-system-x86_64 -nographic -kernel xxx -initrd xxx -append "conso ...

  3. html鼠标事件

    jsp鼠标事件汇总 onclick 单击时触发的事件,这个比较常用 ondblclick 双击时触发的事件 onmoucedown 鼠标按下时触发的事件(个人觉得与onclick异曲同工) onmou ...

  4. commons.fileupload 文件上传

    编辑jsp页面获取文件 <html> <head> <base href="<%=basePath%>"> <title> ...

  5. YTU 2508: 武功秘籍

    2508: 武功秘籍 时间限制: 1 Sec  内存限制: 128 MB 提交: 1384  解决: 438 题目描述 小明到X山洞探险,捡到一本有破损的武功秘籍(2000多页!当然是伪造的).  他 ...

  6. codeforces 940F 带修改的莫队

    F. Machine Learning time limit per test 4 seconds memory limit per test 512 megabytes input standard ...

  7. BZOJ_4753_[Jsoi2016]最佳团体_树形背包+01分数规划

    BZOJ_4753_[Jsoi2016]最佳团体_树形背包+01分数规划 Description JSOI信息学代表队一共有N名候选人,这些候选人从1到N编号.方便起见,JYY的编号是0号.每个候选人 ...

  8. 从EJB规范理解微服务

    晚上看了一篇从JavaEE谈微服务的文章,里面不少观点还是很有启发的,下面最有感触的,从失败的EJB谈微服务. 说起JavaEE规范,要先从EJB(Enterprise Java Bean),他是一种 ...

  9. 云服务器装teamviewer

    [int32] EulaAccepted = 1 [int32] EulaAcceptedRevision = 6

  10. E20171229-hm

    specification  n. 规格; 说明书; 详述;