1111

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>五星评价(图片实现) </title>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

</head>

<body>

    <div class="starMain" style="width: 100%;margin: 0 auto;height: 10px;line-height:10px;margin-top: 1px;">

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

        <img class="ev-star" src="/Script/image/evaluate/empty.png" />

    </div>

    <br/> <br />

    <input class="preData starResult" type="text" />

    <script>

        $(function () {

            $(".starMain").each(function () {

                starFun($(this));

            })

        });

        function starFun(element) {

            var imgs = element.find(".ev-star");

            var len = imgs.length;

            for (var i = 0; i < len; i++) {

                imgs[i].index = i;

                imgs[i].onclick = function () {

                    var count = 0;

                    for (var j = 0; j <= this.index; j++) {

                        imgs[j].src = "/Script/image/evaluate/full.png";

                        count++;

                    }

                    for (var h = (this.index + 1); h < len; h++) {

                        imgs[h].src = "/Script/image/evaluate/empty.png";

                    }

                    var starResult = $(this).parent().parent().find(".starResult");

                    starResult.val(count);

                }

            }

        }

    </script>

</body>

</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. A program to print Fahrenheit-Celsius table with floating-point values

    我的主力博客:半亩方塘 Another program to print Fahrenheit-Celsius table with decimal integer This program is p ...

  2. 【HNOI模拟By YMD】move

    Description 设P(n)为从(0,0)移动到点(n,0)的不同路径数目,移动的方式有以下三种:(x,y)->(x+1,y-1),(x,y)->(x+1,y),(x+y)-> ...

  3. 关于ExecuteNonQuery执行存储过程的返回值 、、实例讲解存储过程的返回值与传出参数、、、C#获取存储过程的 Return返回值和Output输出参数值

    关于ExecuteNonQuery执行存储过程的返回值 用到过ExecuteNonQuery()函数的朋友们在开发的时候肯定这么用过. if(cmd.ExecuteNonQuery("xxx ...

  4. 【HDU 2157】 How Many Ways??

    [题目链接] 点击打开链接 [算法] 设A[i][j]为走一条边,从i走到j的方案数 C[i][j]为走两条边,从i走到j的方案数,显然有 : C = A * A = A^2 C'[i][j]为走三条 ...

  5. python-----opencv读取视频、读取图片 显示指定大小并按键实现暂停、播放

    按空格键实现暂停播放,代码如下: cv2.namedWindow("m1", 0) cv2.resizeWindow("m1", 800, 600) cv2.i ...

  6. ZOJ 3956 Course Selection System 背包DP

    ZOJ3956 观察数据范围, c的值非常小 只有100 所以c的和也很有限 只有50000 是否可以从这里下手? 对于某一个c的和 我们一定希望h的和最大 才有可能是最终答案. 于是有了类似背包的d ...

  7. 洛谷 P2296 寻找道路 —— bfs

    题目:https://www.luogu.org/problemnew/show/P2296 第一次用 Emacs 对拍,写了半天: 注意那个 is 赋值的地方很容易错,千万别反复赋值: 一道水题写了 ...

  8. JeePlus：项目部署

    ylbtech-JeePlus:项目部署 1.返回顶部 1. 项目部署 1 开发工具:idea/eclipse/myeclipse+ mysql/oracle+tomcat6/7/8. 下面以ecli ...

  9. ipvs和ipvsadm

    ipvs和ipvsadm ipvs:内核中的协议栈上实现 ipvs是LVS软件核心,是运行在LB上的,这是个基于ip层的负载均衡. ipvs的总体结构主要有ip包处理,负载均衡算法,系统配置和管理三个 ...

  10. Hadoop伪分布式模式搭建

    title: Hadoop伪分布式模式搭建 Quitters never win and winners never quit. 运行环境: Ubuntu18.10-server版镜像:ubuntu- ...